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内 容 简 介 


本 书 由 浅 入 深 地 介绍 了 使 用 Dreamweaver、Flash、Photoshop 等 软件 进行 网 站 设计 和 网 页 制作 的 方法 。 全 
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了 路 


在 互联 网 时 代 ， 网 站 作为 面向 世界 的 窗口 ， 其 设计 和 制作 包含 多 种 技术 ， 例 如 平面 设计 技术 、 动 画 
制作 技术 、CSS 技术 、XHTML 技术 和 JavaScript 技术 等 。 本 书 以 Dreamweaver、Photoshop 和 Flash 等 为 
基本 工具 ， 详细 介绍 如 何 通过 Photoshop 设计 网 站 的 界面 和 图 形 ， 通 过 Flash 制作 网 站 的 动画 ， 以 及 通过 
Dreamweaver 编写 网 页 代码 。 除 此 之 外 .本 书 还 介绍 了 Web 标准 化 规范 的 相关 知识 ,包括 XHTML 标记 
语言 、CSS 样式 表 等 。 

本 书 由 经 验 丰富 的 网 页 设计 人 员 编写 而 成 ， 立 足 于 网 络 行业 ， 详 细 介 绍 娱乐 网 站 、 门 户 网 站 和 企业 
网 站 等 类 型 网 站 开发 技术 ， 以 及 各 种 网 站 栏目 的 设计 方法 。 

1. 本 书 主要 内 容 

全 书 共 分 为 25 章 , 通过 大 量 的 实例 全 面 介 绍 了 网 页 设计 与 制作 过 程 中 使 用 的 各 种 专业 技术 ， 以 及 用 
户 可 能 遇 到 的 各 种 问题 。 各 章 的 主要 内 容 简介 如 下 。 

第 1 章 : 全 面 介绍 了 网 站 建设 基础 知识 ， 包 括 网 站 基础 知识 概况 、 网 页 界面 构成 元 素 、 网 页 设计 实 
现 、 网 页 色彩 基础 、 网 站 策划 等 内 容 : 第 2 章 : 全 面 介 绍 了 网 站 与 数据 库 技 术 ， 包 括 设计 网 站 、 创 建 本 
地 站 点 、Access 和 SQL Server 数据 库 等 内 容 : 第 3 章 : 全 面 介 绍 了 图 像 设 计 软件 Photoshop， 包括 网 页 界 
面 概述 、 选 择 选取 、 图 层 编辑 、 编 辑 文本 、 使 用 蒙 版 、 应 用 滤 镜 、 应 用 切片 等 内 容 。 

第 4 章 : 全 面 介 绍 了 制作 网 页 动画 Flash， 包 括 导入 动画 素材 、 绘 制 动 画图 形 、 处 理 动画 文本 、 网 页 
动画 类 型 、Flash 滤 镜 效果 等 内 容 : 第 5 章 : 全 面 介 绍 了 网 页 代码 软件 Dreamweaver， 包 括 创建 与 管理 站 
点 、 插 入 网 页 图 像 、 创 建 各 种 链接 等 内 容 ; 第 6 章 : 全 面 介 绍 了 添加 网 页 中 的 文本 ， 包 括 页 面 对 话 框 和 
外 观 (CSS) 属性 、 设 置 链 接 和 标题 (CSS) 属性 、 设 置 跟踪 图 像 属 性 、 插 入 文本 、 项 目 列表 等 内 容 。 

第 7 章 : 介绍 了 添加 网 页 图 像 ， 包括 添加 图 像 、 设 置 图 像 的 基本 属性 、 设 置 图 像 大 小 、 设 置 图 像 位 
置 等 内 容 : 第 8 章 : 介绍 了 网 页 中 的 链接 ,包括 超 链 接 类 型 、 插 入 超 链接 、 绘 制 热点 区 域 、 编 辑 热点 区 
域 等 内 容 ; 第 9 章 : 介绍 了 设计 多 媒体 网 页 ， 包 括 插入 Flash 动画 、 透 明 Flash 动画 、 插 入 FLV 视频 、 多 
媒体 网 页 制作 等 内 容 。 

第 10 章 : 介绍 了 设计 数据 表格 ,包括 创建 表格 、 设 置 表格 属性 、 编 辑 表 格 、Spry 框架 和 Spry 菜单 
栏 等 内 容 ; 第 11 章 : 介绍 了 XHTML 标记 语言 , 包括 XHTML 概述 、XHTML 基本 语法 、 元 素 分 类 、 常 
用 元 素 等 内 容 ; 第 12 章 : 介绍 了 设计 网 页 元 素 样式 ， 包 括 CSS 概述 、CSS 样式 分 类 、CSS 基本 语法 、 
CSS 选择 器 、CSS 选择 方法 、 使 用 CSS 样式 表 、 编 辑 CSS 规则 等 内 容 。 

第 13 章 : 介绍 了 Web 2.0 布局 方式 . 包括 CSS 盒 特性 、 流 动 定位 方式 、 绝 对 定位 方式 、 浮 动 定位 方 
式 等 内 容 ; 第 14 章 : 全 面 介绍 了 网 页 交互 应 用 ,包括 网 页 行为 概述 、 网 页 交互 步 又、 设置 文本 等 内 容 ; 
第 15 章 : 主要 介绍 了 交互 网 页 设计 .包括 应 用 表单 元 素 、Spry 表单 验证 等 内 容 。 

第 16 章 : 介绍 了 网 页 框架 应 用 , 包括 创建 框架 集 、 选 择 框架 和 框架 集 、 框 架 属 性 、 框 架 标 签 等 内 容 ， 
第 17 章 : 介绍 了 CSS 样式 . 包括 博客 的 栏目 .博客 与 传统 网 站 的 区 别 、 博 客 的 布局 方式 、CSS 滤 镜 等 内 
容 : 第 18 章 : 介绍 了 表格 ， 包括 健康 类 网 站 类 型 、 插 入 表格 、 设 置 表格 、 编 辑 表 格 等 内 容 。 

第 19 章 : 介绍 了 文本 样式 ， 包 括 服饰 类 网 站 类 型 、 服 饰 类 网 站 设计 风格 、 服 饰 类 网 站 的 色调 分 析 、 
网 页 文本 、 文 本 样式 等 内 容 : 第 20 章 : 介绍 了 XHTMLA+CSS. 包括 企业 类 网 站 概述 、 常 见 的 块 状元 素 、 
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常见 的 内 联 元 素 、 层 的 样式 等 内 容 : 第 21 章 : 介绍 了 JavaScript， 包括 房地产 网 站 分 类 、 房 地 产 网 站 的 
设计 要 点 、 不 动产 网 站 的 设计 风格 .JavaScript 概述 、 运 算 符 和 表达 式 、 控 制 语句 等 内 容 。 

第 22 章 : 介绍 了 表单 . 包括 教育 网 站 类 别 、 教育 类 网 站 模式 、 表单 及 表单 对 象 、 插 入 按钮 对 象 、Spry 
表单 等 内 容 : 第 23 章 : 介绍 了 行为 . 包括 娱乐 类 网 站 概述 、 娱 乐 网 站 色彩 、 使 用 行为 、 设 置 文本 和 图 像 
等 内 容 ; 第 24 章 : 介绍 了 Flash 动画 ,包括 餐饮 网 站 、 帧 、 元 件 、 滤 镜 、 补 间 、 特 效 、3D、 骨 骼 等 内 容 : 
第 25 章 : 介绍 了 ASP+Access, 包括 购物 类 网 站 分 类 、ASP 基础 、 流 程控 制 语句 、ASP 内 置 对 象 等 内 容 。 

2. 本 书 特色 

本 书 是 一 本 专门 介绍 网 页 设计 与 制作 基础 知识 入 门 读物 ， 在 编写 过 程 中 精心 设计 了 丰富 的 实例 ， 以 
帮助 读者 顺利 学 习 本 书 的 内 容 。 书 中 针对 各 个 章节 不 同 的 知识 内 容 ， 提供 了 多 个 不 同 的 实例 。 每 章 穿插 
大 量 的 提示 ， 构筑 了 面向 实际 的 知识 体系 。 

本 书 统一 采用 三 级 标题 灵活 安排 全 书 内 容 ， 摆脱 了 善 通 培训 教程 按部就班 讲解 的 案 白 。 每 章 最 后 都 
对 本 章 重 点 、 难 点 知识 进行 分 析 总 结 ， 从 而 达到 内 容 安排 收 放 自 如 ， 方 便 读 者 学 习 本 书 内 容 的 目的 。 

3. 本 书 读者 对 象 

本 书 内 容 详 尽 、 讲 解 清晰 ,全书 包含 众多 知识 点 .采用 与 实际 范例 相 结合 的 方式 进行 讲解 ， 并 配 以 
清晰 、 简 洁 的 图 文 排版 方式 .使 学 习 过 程 变 得 更 加 轻松 和 易于 上 手 。 

本 书 适合 高 等 院 校 和 高 职高 专 院 校 学 生 学 习 使 用 .也 可 以 作为 网 页 设计 与 制作 初学 者 、 网 站 开发 人 
员 、 大 中 专 院 校 相关 专业 师 生 、 网 页 制作 培训 班 学 员 等 的 参考 资料 。 

参与 本 书 编写 的 除了 封面 署名 人 员外 ,还 有 隋 晓 莹 、 郑 家 祥 、 王 红 梅 、 张 伟 、 刘 文 渊 、 杜 鹏 等 人 。 
由 于 时 间 仓 促 . 水 平 有 限 . 疏漏 之 处 在 所 难免 , 欢迎 读者 朋友 登录 清华 大 学 出 版 社 的 网 站 www.tup.com.cn 
与 我 们 联系 ， 帮 助 我 们 改进 提高 。 
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随 着 互联 网 的 迅速 发 展 和 普及 .网 络 已 经 逐渐 渗透 到 社会 的 各 行 各 业 ， 网 页 设计 与 网 站 建设 这 一 新 
兴 的 行业 也 随 之 被 越 来 越 多 的 人 所 了 解 。 越 来 越 多 的 企业 开始 建设 网 站 ， 许 多 公司 都 拥有 自己 的 网 站 ， 
他 们 利用 网 站 来 进行 宣传 、 产 品 资讯 发 布 、 招 聘 人 才 等 ,希望 通过 设计 良好 的 网 站 向 用 户 更 好 地 展示 自 
己 的 产品 ， 提 升 客户 的 购买 欲望 例如 淘宝 店 的 模板 设计 等 。 

本 章 主要 介绍 网 站 基础 知识 概况 、 网 页 界面 构成 元 素 、 网 页 版 块 结构 、 网 页 设计 目的 、 网 页 设计 的 
实现 、 网 页 色彩 基础 、 网 站 策划 以 及 网 页 设计 与 网 站 建设 常用 软件 。 通 过 本 章 的 学 习 ， 我 们 可 以 对 网 站 
有 一 个 大 概 的 了 解 ， 为 后 期 制作 网 站 打下 基础 。 
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本 节 主 要 讲解 了 什么 是 网 站 、 什 么 是 静态 网 站 、 什 么 是 动态 网 站 、 怎 样 申请 域名 和 怎样 申请 服务 器 
空间 等 知识 。 通 过 对 网 站 基础 知识 概括 的 学 习 . 可 以 让 用 户 对 网 站 有 一 个 大 概 的 了 解 ， 知道 网 站 的 构成 
是 什么 、 静 态 网 站 与 动态 网 站 的 区 别 在 哪里 ， 以 及 为 什么 要 申请 域名 和 申请 服务 器 空间 。 


1.1.1 什么 是 网 站 


站 由 域名 、 服 务 器 空间 、 网 页 三 部 分 组 成 。 网 站 的 域名 就 是 在 访问 网 站 时 在 浏览 器 地 址 栏 中 输入 
的 网 址 ， 网 页 是 通过 Dreamweaver 等 软件 制作 编辑 出 来 的 ， 多 个 网 页 由 超级 链接 联系 起 来 然后 网 页 需 
要 上 传 到 服务 器 空间 中 ， 供 浏览 器 访问 网 站 中 的 内 容 。 

网 站 是 在 互联 网 上 通过 超级 链接 的 形式 构成 的 相关 网 页 集合 。 通 过 网 站 ， 人们 可 以 浏览 、 获 取信 息 。 
在 互联 网 的 早期 ， 网 站 大 多 只 是 单纯 的 文本 。 经 过 几 年 的 发 展 ， 当 万 维 网 出 现 之 后 , 图像、 声音 、 动 画 、 
视频 ,甚至 3D 技术 开始 在 互联 网 上 流行 起 来 . 网 站 也 慢 慢 地 发 展 成 我 们 现在 看 到 的 图 文 并 茂 的 样子 。 通 
过 动态 网 页 技术 ， 用户 也 可 以 与 其 他 用 户 或 网 站 管理 者 进行 交流 .如 图 1-1 所 示 的 运动 鞋 网 站 。 









































1.1.2 静态 网 站 


制作 网 站 分 为 两 类 : 一 类 是 静态 网 站 .以 HTML 为 主要 代表 .用 于 制作 内 容 固 定 不 变 的 网 页 ， 另 一 
类 是 动态 网 站 ， 如 ASP、PHP、ASPNET 等 ， 用 于 制作 内 容 需 要 动态 改变 的 网 页 。 

静态 网 站 的 特点 即 网 页 内 容 是 “固定 不 变 ” 的 ， 它 没有 后 台数 据 库 ， 也 不 含 程序 代码 ， 是 不 可 交互 的 
网 页 。 当 设计 者 完成 网 页 设计 后 ,可 以 发 布 到 服务 器 中 ， 并且 浏览 者 浏览 网 页 时 其 内 容 不 会 改变 。 
1. HTML 是 超 文 本 标记 语言 

HTML 是 超 文本 标记 语言 .是 目前 网 络 中 应 用 最 为 广泛 的 语言 .也 是 构成 网 页 文档 的 主要 语言 ,HTML 
网 页 无 需 上 传 至 服务 器 即 可 在 本 地 浏览 。 静态 网 页 的 后 缀 通常 为 .htm 或 者 .html。HTML 的 结构 包括 头 部 、 
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主体 两 大 部 分 ， 其 中 头 部 描述 浏览 器 所 需 的 信息 .而 主体 则 包含 所 要 说 明 的 具体 内 容 。 
2. XML 即 可 扩展 标记 语言 

XML 即 可 扩展 标记 语言 ， 它 依赖 于 内 容 的 技术 ,是 当前 处 理 结构 化 文档 信息 的 有 力 工 具 。XML 是 
一 种 简单 的 数据 存储 语言 ， 使 用 一 系列 简单 的 标记 描述 数据 ， 而 这 些 标记 可 以 使 用 自 定义 的 方式 建立 。 
3. XHTML 可 扩展 的 超 文本 标记 语言 

XHTML 的 中 文 全称 为 可 扩展 的 超 文本 标记 语言 。HTML 是 一 种 基本 的 Web 网 页 设计 语言 . XHTML 
则 是 一 个 基于 XML 的 置 标语 言 。XHTML 与 普通 HIML 最 大 的 区 别 即 是 扩展 了 对 CSS 和 DIV 的 支持 。 

Script 是 使 用 记事 本 编写 的 、 对 运行 环境 要 求 很 低 、 仅 使 用 浏览 器 即 可 运行 的 小 型 程序 的 总 称 ， 
JavaScript 就 是 以 编程 语言 Java 为 基础 的 脚本 语言 。JavaScript 的 小 段 程 序 经 常 应 用 于 网 页 特效 中 。CSS 
即 级 联 样式 表 或 层 堆 样式 表 . 通常 用 名 字 或 HIML 标签 表示 . HTML 文档 中 的 CSS 样式 表 可 以 控制 大 多 
数 传 统 的 文本 格式 ,还 可 以 指定 特殊 的 HTML 属性 。 


1.1.3 动态 网 站 


动态 网 页 的 概念 是 相对 于 静态 网 页 而 言 的 ， 其 特点 为 采用 了 数据 库 技 术 ， 可 以 根据 用 户 提交 的 不 同 
信息 动态 生成 新 的 页 面 。 和 静态 网 页 相 比 ， 动 态 网 页 可 以 用 很 少 的 页 面 实现 更 多 的 功能 ， 因 此 可 以 大 幅 
节省 服务 器 中 的 资源 。 

动态 网 页 的 后 级 名 种 类 非常 多 ,如 ASP 和 ASPNET 程序 页 面 的 后 级 名 分 别 为 .asp 和 .aspx 等 。 动 态 
网 页 通常 是 由 使 用 编程 语言 编写 的 网 络 应 用 程序 控制 的 。 常 见 的 用 于 动态 网 页 编写 的 程序 主要 有 perl、 
C# 和 VBScript 等 。 用 这 些 编 程 语言 可 以 开发 如 下 类 型 的 动态 网 页 。 

1. ASP 

ASP 的 中 文 全 称 为 动态 交互 网 页 技术 ， 它 是 一 种 在 服务 器 端 解释 执行 的 脚本 语言 ， 可 以 根据 访问 数 
据 库 的 结果 自动 生成 HIML 语言 页 面 ， 以 响应 用 户 的 请 求 。ASP 的 特点 是 安装 方便 ， 编 写 代码 简单 。 
2. ASPNET 

ASPNET 是 一 种 建立 在 通用 语言 上 的 程序 架构 ,能 被 用 于 只 用 一 人 台 Web 服务 器 来 建立 强大 的 Web 
应 用 程序 。ASPNET 是 把 基于 通用 语言 的 程序 在 服务 器 上 运行 ， 这 样 比 一 条 一 条 地 解释 强 很 多 。 

3. PHP 

PHP 是 一 种 跨 平台 的 服务 器 端 嵌入 式 脚本 语言 ， 它 采用 C、Java 和 Perl 语言 的 语法 ,并 结合 PHP 自 
己 的 特性 . 使 Web 开发 者 能 够 快速 地 编写 动态 页 面 代码 。PHP 支持 多 种 数据 库 ， 并 且 不 受 限 制 地 获得 
4. JSP 

JSP 是 一 种 简单 易 用 的 在 服务 器 端 编译 执行 的 动态 网 页 开发 技术 ， 其 使 用 方式 是 在 HIML 页 面 文件 
中 加 入 Java 代码 片段 和 JSP 标记 。 当 服务 器 接收 到 客户 端 发 来 的 JSP 页 面 请 求 时 ， 再 将 JSP 代码 转换 为 
Servlet 代码 . 然后 由 JSP 解释 器 编译 执行 . 构成 JSP 网 页 。 JSP 的 特点 是 第 一 次 访问 其 页 面 时 速度 比较 慢 . 
但 如 果 解 释 过 页 面 代码 后 ,第 二 次 访问 时 由 服务 器 直接 调用 客户 端的 代码 片段 ， 故 速度 很 快 。 

5. Ajax 

Ajax 是 一 种 新 的 网 页 开发 技术 , 它 结合 了 Java、XML 和 JavaScript 等 编程 技术 , 是 主要 基于 Java 技 
术 的 网 页 开发 技术 。Ajax 的 特点 是 使 用 该 技术 构建 的 Web， 其 动态 数据 处 理 都 是 在 客户 端 进行 的 ， 不 需 
要 打 断 交互 流程 重新 加 载 页 面 。 
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1.1.4 申请 域名 


网 站 的 域名 就 是 在 访问 网 站 时 .在 浏览 器 地 址 栏 中 输入 的 网 址 。 从 网 络 体系 结构 上 来 讲 ， 域 名 是 域 
名 管理 系统 (Domain Name System. DNS) 进行 全 球 统一 管理 的 、 用 来 映射 主机 IP 地址 的 一 种 主机 命名 
方式 
1. 域名 选取 原则 

域名 应 该 简明 易 记 ， 便 于 输入 。 这 是 判断 域名 好 坏 的 最 重要 因素 。 一 个 好 的 域名 应 该 短 而 顺口 、 便 
于 记忆 ,最 好 让 人 看 一 样 就 能 记 住 ， 而 且 读 起 来 发 音 清晰 ， 不 会 导致 拼写 错误 。 此 外 ,域名 选取 还 要 避 
免 同 音 异 义 词 。 域 名 要 有 一 定 的 内 涵 和 意义 。 用 有 一 定 意义 和 内 涵 的 词 或 词组 作为 域名 ， 不 但 可 记忆 性 
好 ,而且 有 助 于 实现 企业 的 营销 目标 ， 如 企业 的 名 称 、 产 品名 称 、 商 标 名 、 品 牌 名 等 都 是 不 错 的 选择 
这 样 能 够 使 企业 的 网 络 营销 目标 和 非 网 络 营销 目标 达成 一 致 。 
2. 网 站 域名 类 型 

一 个 域名 是 分 为 多 个 字段 的 ， 如 www.sina.com.cn， 这 个 域名 分 为 4 个 字段 。cn 是 一 个 国家 字段 , 表 
示 域 名 是 中 国 的 ; com 表示 域名 的 类 型 ， 表 示 这 个 域名 是 公共 服务 类 的 域名 :; www 表示 域名 提供 www 
网 站 服务 sina 表示 这 个 域名 的 名 称 。 域名 中 的 最 后 一 个 字段 一 般 是 国家 字段 。 对 于 .gov (政府 域名 )、.edu 
(教育 域名 ) 等 类 型 的 域名 ， 需 要 向 有 相关 资质 的 机 构 提供 有 效 的 证 明 材 料 才 可 以 申请 和 注册 。 
3 申请 域名 

域名 是 由 国际 域名 管理 组 织 或 国内 的 相关 机 构 统一 管理 的 。 有 很 多 网 络 公司 可 以 代理 域名 的 注册 业 
务 ， 可 以 直接 在 这 些 网 络 公司 注册 一 个 域名 。 注 册 域 名 时 ， 需 要 找到 服务 较 好 的 域名 代理 商 进 行 注册 。 
可 以 在 百度 中 查找 域名 代理 商 , 在 百度 中 打开 中 国 万 网 的 网 站 (http://www.net.cn) ， 在 这 里 可 以 申请 注册 
域名 。 
1.1.5 申请 服务 器 空间 


访问 网 站 的 过 程 实际 上 就 是 用 户 计算 机 和 服务 器 进行 数据 连接 和 数据 传递 的 过 程 ， 这 就 要 求 网 站 必 
须 存 放 在 服务 器 上 才能 被 访问 。 一 般 的 网 站 ， 不 是 使 用 一 个 独立 的 服务 器 ， 而 是 在 网 络 公司 租用 一 定 大 
小 的 存储 空间 来 支持 网 站 的 运行 。 这 个 租用 的 网 站 存储 空间 就 是 服务 器 空间 。 

1. 为 什么 要 申请 服务 器 空间 

一 个 小 的 网 站 直接 放 在 独立 的 服务 器 上 是 不 实际 的 ， 实 现 方法 是 在 商用 服务 器 上 租用 一 块 服务 器 空 

间 ， 每 年 定期 支付 很 少 的 服务 器 租用 费 ， 即 可 把 自己 的 网 站 放 在 服务 器 上 运行 。 租 用 了 服务 器 空间 ,用 
只 需要 管理 和 更 新 自己 的 网 站 ， 服 务 器 的 维护 和 管理 则 由 网 络 公司 完成 。 

在 租用 服务 器 空间 时 需要 选择 服务 较 好 的 网 络 公司 。 好 的 服务 器 空间 运行 稳定 ， 很 少 出 现 服务 器 停 
机 现象 ， 有 很 好 的 访问 速度 和 售后 服务 。 某 些 测试 软件 可 以 方便 地 测 出 服务 器 的 运行 速度 。 新 网 、 万 网 、 
中 资源 等 公司 的 服务 器 空间 都 有 很 好 的 性 能 和 售后 服务 。 在 网 络 公司 主页 注册 一 个 用 户 名 并 登录 后 ， 即 
可 购买 服务 器 空间 。 在 购买 时 需要 选择 空间 的 大 小 和 支持 程序 的 类 型 。 

2. 服务 器 空间 的 类 型 

不 同 服务 器 空间 的 主要 区 别 是 支持 的 网 站 程序 和 支持 的 数据 库 不 同 。 常 用 的 服务 器 空间 可 能 分 别 支 
持 下 面 这 些 不 同 的 网 站 程序 。 

ASP: 使 用 Windows 系统 和 IIS 服务 器 。 
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PHP: 使 用 Linux 系统 或 Windows 系统 .使 用 Apache 网 站 服务 器 。 

.NET: 使 用 Windows 系统 和 IIS 服务 器 。 

JSP: 使 用 Windows 系统 和 Java 的 网 站 服务 器 。 

不 同 的 服务 器 空间 支持 不 同 的 数据 库 ， 常 用 的 服务 器 空间 支持 的 数据 库 有 以 下 几 种 。 

Access: 常用 于 ASP 网 站 。 

SQL Server 2000: 常用 于 ASP 网 站 或 NET 网 站 。 

MySQL 数据 库 ， 常用 于 PHP 或 JSP 网 站 。 

Oracle 数据 库 : 常用 于 JSP 网 站 。 

在 注册 服务 器 空间 时 ， 需 要 选择 支持 自己 网 站 程序 与 数据 库 的 服务 器 空间 。 网 站 的 域名 与 服务 器 空 
间 是 需要 每 年 按时 续费 的 。 用 户 需要 按 网 络 公司 规定 的 方式 进行 续费 。 域 名 和 空间 不 可 以 欠 费 ， 如果 欠 
费 ， 管 理 部 门 会 收回 这 个 域名 和 空间 ， 如 被 其 他 用 户 再 次 注册 以 后 就 很 难 再 注册 到 这 个 域名 ， 也 可 能 导 
致 自己 网 站 的 数据 丢失 。 


隐 侧 网 页 界面 构成 元 素 


网 页 界面 即 是 浏览 器 打开 的 文档 ， 因 此 可 以 将 其 看 作 是 浏览 器 的 一 个 组 成 部 分 ， 网 页 的 界面 只 包含 
内 置 元 素 ， 而 不 包含 窗 体 元 素 。 网 页 界面 构成 元 素 以 内 容 来 划分 ， 一 般 的 网 页 界面 构成 元 素 包 括 Logo、 
导航 条 、Banner、 内 容 栏 版 块 和 版 尾 版 块 。 通 过 对 网 页 界面 构成 元 素 的 学 习 ， 让 用 户 了 解 一 般 的 网 页 界 
面 都 是 由 哪些 元 素 组 成 的 。 


1.2.1 Logo 和 导航 条 


网 站 Logo 是 整个 网 站 对 外 唯一 的 标识 和 标志 .是 网 站 商标 和 品牌 的 图 形 表现 。Logo 的 内 容 通常 包 
括 特定 的 图 形 和 文本 ， 其 中 图 形 往往 与 网 站 的 具体 内 容 或 开发 网 站 的 企业 文化 紧密 结合 ， 以 体现 网 站 的 
特色 ; 文本 主要 起 到 加 深 用 户 印象 的 作用 ， 用 户 可 以 通过 这 些 文本 介绍 网 站 的 名 称 、 服 务 ， 也 可 以 体现 
网 站 的 价值 观 、 宣 传 口号 。 

导航 条 是 索引 网 站 内 容 ， 帮 助 用 户 快速 访问 网 站 功能 的 辅助 工具 。 根 据 网 站 内 容 . 一 个 网 页 可 以 设 
置 多 个 导航 条 ,还 可 以 设置 多 级 的 导航 条 以 显示 更 多 的 导航 内 容 。 导 航 条 内 包含 的 是 网 站 功能 的 按钮 或 
链接 ， 其 项 目的 数量 不 宜 过 多 。 通 常 同 级 别 的 项 目 数量 以 3~7 个 为 宜 。 超 过 这 一 数量 后 ,应 尽量 放 到 下 
一 级 别处 理 。 设 计 合理 的 导航 条 可 以 有 效 地 提高 用 户 访问 网 站 的 效率 。 

在 导航 条 的 设计 中 .还 可 以 多 采用 类 似 Flash 或 jQuery 脚本 等 实现 的 动画 元 素 . 吸 引用 户 访问 .Banner 
的 中 文 意思 为 旗帜 或 网 幅 ， 是 一 种 可 以 由 文本 、 图 像 和 动画 相 结合 而 成 的 网 页 栏目 。Banner 的 主要 作用 
是 显示 网 站 的 各 种 广告 .包括 网 站 本 身 产品 的 广告 和 与 其 他 企业 合作 放置 的 广告 。 在 网 页 中 预 留 标 准 
Banner 大 小 的 位 置 ， 可 以 降低 网 站 的 广告 用 户 Banner 设计 成 本 .使 Banner 广告 位 的 出 租 更 加 便捷 。 在 
众多 商业 网 站 中 . 通常 都 会 遵循 以 上 标准 定义 Banner 的 尺寸 , 方便 用 户 设计 统一 的 Banner 应 用 在 所 有 网 
站 上 。 然 而 ， 在 一 些 不 依靠 广告 位 出 租 赢利 的 网 站 中 .Banner 的 大 小 则 比较 自由 。 网 页 的 设计 者 完全 可 
以 根据 网 站 内 容 以 及 页 面 美观 的 需要 随时 调整 Banner 的 大 小 。 
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1.2.2 ”Banner 和 内 容 版 块 


Banner 的 中 文 直译 为 旗帜 、 网 幅 或 横幅 ， 意 译 则 为 网 页 中 的 广告 。 多 数 Banner 都 以 JavaScript 技术 
或 Flash 技术 制作 ， 通 过 一 些 动画 效果 .展示 更 多 的 内 容 ， 并 吸引 用 户 观看 . 如 图 1-2 所 示 。 








图 1-2 苹果 网 站 Banner 


内 容 栏 是 网 页 内 容 的 主体 ,通常 可 以 由 一 个 或 多 个 子 栏 组 成 ,包含 网 页 提供 的 所 有 信息 和 服务 项 目 。 
内 容 栏 的 内 容 既 可 以 是 图 像 ， 也 可 以 是 文本 . 或 图 像 和 文本 结合 的 各 种 内 容 。 在 设计 内 容 栏 时 ， 用 户 可 
以 先 独立 地 设计 多 个 子 栏 ， 然 后 再 将 这 些 子 栏 拼接 在 一 起 ， 形 成 整体 的 效果 。 同 时 .还 可 以 对 子 栏 进行 
优化 排列 ， 提 高 用 户 的 体验 。 如 果 网 页 的 内 容 较 少 ， 则 可 以 使 用 单独 的 内 容 栏 ， 通 过 大 量 的 图 像 使 网 页 
更 加 美观 ， 如 图 1-3 所 示 。 
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图 1-3 单独 的 内 容 栏 


1.2.3 ”版 尾 版 块 


版 尾 是 整个 网 页 的 收尾 部 分 。 在 这 部 分 内 容 中 ， 可 以 声明 网 页 的 版 权 、 法 律 依据 以 及 为 用 户 提供 的 
各 种 提示 信息 等 。 

除 此 之 外 ,在 版 尾部 分 还 可 以 提供 独立 的 导航 条 .为 将 页 面 滚 动 到 底部 的 用 户 提供 一 个 导航 的 替代 
方式 等 。 版 权 的 书写 应 该 符合 网 站 所 在 国家 的 法 律 规范 ， 同 时 遵循 一 般 的 习惯 。 正 确 的 版 权 书写 格式 ， 
如 图 1-4 所 示 。 

















Copyright (©) [Dates] (by) [Author/Owner] (All rights reserved.) 


图 1-4 正确 的 版 权 书写 格式 
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在 上 面 的 文本 中 . 小 括号 “0” 中 的 内 容 是 可 省 略 的 内 容 ， 中 括号 “ 口 ” 中 的 内 容 是 根据 用 户 具体 信 
息 而 可 更 改 的 内 容 。 版 权 符号 “@” 有 时 可 以 替代 “Copyright ”的 文本 ,但 是 用 户 不 能 以 带 有 括号 的 大 写 
字母 C 蔡 代 版 权 符号 。 在 一 些 国家 的 法 律 中 ,“All rights Teserved.” 是 不 可 省 略 的 。 但 在 我 国法 律 中 并 没 
有 对 此 进行 严格 规范 ， 因 此 在 实际 操作 中 可 以 省 略 。 


局 届 网 页 版 块 结构 


在 网 页 设计 与 网 站 建设 工作 中 ， 网 页 界面 构成 元 素 固然 重要 .但 这 些 界面 元 素 在 网 页 中 分 布 的 位 置 
同样 也 直接 影响 到 用 户 的 体验 。 一 般 的 网 页 ， 版 块 结构 主要 包括 5 种 . 即 “ 国 ” 字 框 架 、 拐 角 框架 、 左 
右 框 架 、 上 下 框架 、 封 面 框架 。 用 户 通过 对 网 页 版 块 结构 的 学 习 ， 可 以 在 网 页 设计 过 程 中 ,更 加 合理 地 
利用 有 限 的 页 面 尺 寸 。 

1.3.1 “ 国 ” 字 框架 

” 字 框 架 网 页 布局 又 称 “ 同 ” 字 型 框架 网 页 布局 ， 其 最 上 方 为 网 站 的 Logo、Banner 或 导航 条 和 
内 容 版 块 。 在 内 容 版 块 左右 两 侧 通常 会 分 列 两 小 条 内 容 . 可 以 是 广告 、 友 情 链接 等 ， 也 可 以 是 网 站 的 子 
导航 条 ， 最 下 面 则 是 网 站 的 版 尾 或 版 权 版 块 ， 如 图 1-5 所 示 。 


TY AAA 




























































SA 


本 了 部 
RE 





让 


1.3.2 ”拐角 框架 


拐角 框架 型 布局 也 是 一 种 常见 的 网 页 结构 布局 ,其 与 “ 国 ” 字 框 架 布局 只 是 在 形式 上 有 所 区 别 ， 实 
际 差异 不 大 。 其 区 别 在 于 其 内 容 版 块 只 有 一 侧 有 侧 栏 ， 也 就 是 导航 条 和 侧 栏 组 成 一 个 90? 的 直角 ， 如 图 
1-6 所 示 。 

在 拐角 框架 型 布局 的 网 页 中 . 侧 栏 同样 可 以 放置 立 式 的 Banner 广告 (例如 “摩天 大 楼 ”型 )， 也 可 
以 放置 辅助 的 侧 导 航 栏 ， 为 用 户 访问 网 页 提供 帮助 。 拐 角 框 架 型 布局 的 网 页 比 “ 国 ” 字 型 布局 的 网 页 更 
加 个 性 化 一 些 ， 也 更 具备 实用 性 。 在 具体 的 网 页 设计 中 . 拐角 框架 布局 通常 与 大 幅 的 网 页 留 白 相 结合 。 
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一 些 娱乐 型 网 页 比较 喜欢 使 用 拐角 型 框架 布局 。 





图 1-6 拐角 框架 


1.3.3 左右 框架 


左右 框架 型 网 页 是 一 种 被 垂直 划分 为 两 个 或 多 个 框架 的 网 页 布局 结构 ， 其 样式 仿照 了 传统 的 杂志 风 
格 .可 以 在 各 框架 中 插入 文本 、 图 像 与 动画 等 媒体 。 左 右 框架 型 网 页 布局 通常 会 被 应 用 到 一 些 个 性 化 的 
网 页 或 大 型 论坛 网 页 中 ， 具 有 结构 清晰 、 一 目 了 然 的 优点 ， 如 图 1-7 所 示 。 
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图 1-7 左右 框架 


1.3.4 上 下 框架 


上 下 框架 型 网 页 与 左右 框架 型 类 似 ， 是 一 种 被 水 平 划分 为 两 个 或 多 个 框架 的 网 页 布局 结构 。 在 上 下 
框架 布局 网 页 中 ， 主 题 部 分 并 非 如 “ 国 ” 字 框架 型 或 拐角 框架 型 一 样 由 主 栏 和 侧 栏 组 成 ， 而 是 一 个 整体 
或 复杂 的 组 合 结构 ， 如 图 1-8 所 示 。 

















图 1-8 上 下 框架 


1.3.5 ”封面 框架 


这 种 类 型 的 网 页 通常 作为 一 些 个 性 化 网 站 的 首页 ， 以 精美 的 动画 ， 加 上 几 个 链接 或 “进入 ”按钮 
甚至 只 在 图 片 或 动画 上 做 超 链 接 ， 如 图 1-9 所 示 。 








图 1-9 封面 框架 


在 设计 网 页 时 ， 如 果 只 是 单纯 地 由 线条 和 文字 组 成 ， 则 整个 页 面 会 显得 过 于 单调 。 为 了 解决 这 个 问 
题 使 网 页 看 起 来 丰富 多 彩 . 通常 会 在 网 页 中 插入 图 片 。 因 为 适当 地 使 用 图 片 可 以 让 网 站 充满 活力 和 说 服 
力 ， 也 可 以 加 深 浏览 者 对 网 站 的 印象 。 
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从 严格 意义 上 讲 ， 网 页 设计 是 艺术 创造 与 技术 开发 的 结合 体 。 网 页 设计 是 通过 使 用 更 合理 的 颜色 、 
字体 、 图 片 、 样 式 进行 页 面 设计 美化 ， 在 功能 限定 的 情况 下 ， 尽 可 能 给 予 用 户 完美 的 视觉 体验 。 网 页 设 
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计 目 的 可 根据 网 页 的 内 容 为 用 户 提供 的 服务 类 型 分 为 三 类 ， 即 资讯 类 站 点 、 艺 术 资讯 类 和 艺术 类 站 点 
可 以 依据 网 页 的 类 型 设计 网 页 的 风格 。 通 过 对 站 点 的 了 解 ， 可 以 使 用 户 在 进行 网 页 设计 前 明确 网 页 设计 
的 目的 。 


1.4.1 资讯 类 网 站 


资讯 类 网 站 通常 是 比较 大 型 的 门户 网 站 ,这 类 网 站 需要 为 用 户 提供 海量 的 信息 ， 在 用 户 阅 读 这 些 信 
息 时 寻找 商机 。 

在 设计 这 类 网 站 时 ， 需 要 在 信息 显示 与 版 面 简洁 等 方面 找到 平衡 点 ， 做 到 既 以 用 户 阅 读 信息 的 便捷 
性 为 核心 ， 又 要 保持 页 面 的 整齐 和 美观 ， 防 止 大 量 的 信息 造成 用 户 视觉 疲劳 。 在 设计 文本 时 ， 可 着 力 对 
文本 进行 分 色 处 理 ， 将 各 种 标题 、 导 航 、 内 容 按照 不 同 的 颜色 区 分 。 同 时 要 对 信息 合理 地 分 类 ， 帮 助 用 
户 以 最 快 的 速度 找到 需要 的 信息 。 

以 美国 最 大 的 在 线 购物 网 站 亚马逊 的 首页 为 例 ， 其 在 设计 中 .使 用 了 较为 传统 的 国字 型 布局 。 其 网 
站 的 三 类 导航 使 用 了 三 种 字体 颜色 ， 在 同一 版 块 内 的 导航 标题 使 用 栖 色 粗 体 ， 而 导航 内 容 则 使 用 普通 的 
蓝 色 字体 。 在 刺激 用 户 感官 的 同时 避免 视觉 疲劳 。 在 亚马逊 首页 中 ,每 一 条 详细 信息 都 保证 有 一 张 预览 
图 片 ， 防 止 大 段 乏味 的 文字 使 用 户 厌 烦 。 


1.4.2 ”艺术 资讯 类 和 艺术 类 网 站 


艺术 资讯 类 网 站 通常 是 中 小 型 的 网 站 ， 例 如 一 些 大 型 公司 、 高 校 、 企 业 的 网 站 等 。 互 联网 中 的 大 多 
数 网 站 都 属于 这 一 类 型 。 这 类 网 站 在 设计 上 要 求 较 高 ， 既 需要 展示 大 量 的 信息 ， 又 需要 突出 公司 、 高 校 
和 企业 的 形象 ， 还 需要 注重 用 户 的 体验 。 

设计 这 类 网 站 时 ， 尤 其 需要 注意 图 像 与 文字 的 平衡 、 背 景 图 像 的 选用 以 及 整体 网 站 色调 的 搭配 等 。 
在 这 类 网 站 的 首页 不 应 放置 过 多 的 信息 ,清晰 有 效 的 分 类 远 比 铺 满 屏幕 的 产品 资料 更 容易 吸引 用 户 的 注 
意 力 。 以 著名 的 软件 和 硬件 生产 商 苹果 为 例 ， 其 首页 设计 上 以 追求 简洁 为 主 ， 以 简明 的 导航 条 和 大 片 的 
留 白 给 用 户 较 大 的 想象 空间 。 蔷 果 公 司 在 网 站 设计 上 非常 有 心得 . 其 擅长 使 用 简单 的 圆 角 矩形 栏目 和 渐 
变 的 背景 色 使 网 站 显得 非常 大 气 ， 对 一 些 细节 的 把 握 非常 到 位 。 

艺术 类 网 站 通常 体现 在 一 些小 型 的 企业 或 工作 室 设 计 中 .这 类 网 站 向 用 户 提供 的 信息 内 容 较 少 ， 因 
此 设计 者 可 以 将 较 多 的 精力 放 在 网 站 的 界面 设计 中 。 俄罗斯 设计 师 Foxie 的 个 人 主页 . 通过 大 幅 的 留 白 以 
及 简明 的 色彩 .模拟 了 一 个 书架 ,并 以 书架 上 的 书本 和 相框 作为 导航 条 。 其 在 设计 中 发 布 的 信息 并 不 多 . 
因此 整 站 以 Flash 制作 而 成 ,大量 使 用 动画 技术 ， 通 过 绚丽 的 色彩 展示 个 性 。 


有 调 网 页 设计 的 实现 


随 着 涌 入 互联 网 的 网 民 的 增多 .各 种 各 样 的 网 站 也 层出不穷 ,如 何 创建 一 个 吸引 人 的 网 站 就 显得 非 
常 重要 。 网 站 建设 实际 上 并 没有 太 固 定 的 基本 规范 . 但 是 必须 要 有 一 个 指导 性 的 步 又。 网 页 设计 的 实现 
主要 包括 设计 结构 图 .设计 界面 ,设计 字体 .制作 网 页 概念 图 ,切片 的 优化 .编写 代码 和 优化 页 面 。 通 
过 对 本 节 的 学 习 ， 以 便于 用 户 在 开发 网 站 时 能 够 提升 效率 ,减少 网 站 建设 的 错误 。 
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1.5.1 设计 结构 图 


首先 ， 应 规划 网 站 中 栏目 的 数量 及 内 容 ， 策划 网 
站 需要 发 布 哪些 东西 。 

然后 应 根据 规划 的 内 容 绘制 网 页 的 结构 草图 . 
这 一 部 分 既 可 以 在 纸 上 进 行 ， 也 可 以 在 计算 机 上 通过 
画图 板 、inDesign, 或 者 其 他 更 专业 的 软件 进行 。 结 构 
草图 不 需要 太 精 美 ， 只 需要 表现 出 网 站 的 布局 即 可 ， 
如 图 1-10 所 示 。 


1.5.2 ”设计 界面 


在 纸 上 绘 制 好 网 页 的 结构 图 之 后 ， 即 可 根据 网 站 的 基本 风格 ,在 计算 机 上 使 用 Hiustrator 或 
CorelDRAW 等 矢量 图 形 软件 或 Photoshop、Fireworks 等 位 图 处 理 软件 绘制 网 页 的 Logo、 按 钮 和 图 标 。 

Logo、 按 钮 、 图 标 等 都 是 网 页 界面 设计 的 重要 组 成 部 分 。 设 计 这 些 内 容 时 需要 注意 整体 界面 的 风格 
一 致 性 ,包括 从 色调 到 图 形 的 应 用 、 圆 角 矩 形 与 普通 矩形 的 分 布 等 。 其 中 ,设计 Logo 时 ， 可 使 用 一 些 抽 
象 的 几何 图 形 进行 旋转 、 拼 接 ， 或 将 各 种 字母 和 文字 进行 抽象 变化 ， 例 如 倾斜 、 切 去 直角 、 用 线条 切割 、 
连接 笔画 、 反 色 等 。 

按钮 的 设计 较为 复杂 。 常 见 的 按钮 主要 可 分 为 圆 角 矩 形 、 普 通 和 矩形 、 梯 形 、 圆 形 以 及 不 规则 图 形 等 。 
在 网 页 中 ， 水 平方 向 导航 菜单 的 按钮 设计 比较 随意 ， 可 以 使 用 各 种 形状 。 而 垂直 方向 的 导航 菜单 则 多 使 
用 矩形 或 圆 角 和 矩形 ， 以 使 各 按钮 贴 得 更 加 紧密 ,给 用 户 以 协调 的 感觉 。 图 标 是 界面 中 非常 重要 的 组 成 部 
分 ， 可 以 起 到 画龙点睛 的 作用 。 在 绘制 图 标 时 ， 需 要 注意 图 标 必须 和 其 代表 的 内 容 有 明显 的 联系 。 


1.5.3 ”设计 字体 


字体 是 组 成 网 页 的 最 主要 元 素 之 一 。 合 理 分 配 的 字体 ， 可 以 使 网 站 更 加 美观 ， 也 更 便于 用 户 阅 读 。 
对 于 多 数 浏览 器 和 操作 系统 而 言 ， 汉 字 是 非常 复杂 的 文字 ， 多 数 中 文字 体 都 是 无 法 在 所 有 字号 下 正常 清 
晰 显示 的 。 

以 宋体 字 为 例 ，10px 以 下 的 宋体 通常 会 被 显示 为 一 个 黑 点 (在 手持 设备 上 这 点 尤为 突出 )。 而 20px 
大 小 的 宋体 ， 则 会 出 现 明显 的 锯齿 .笔画 粗细 不 匀 。 即 使 是 微软 设计 的 号 称 最 清晰 的 中 文字 体 微 软 雅 黑 . 
也 无 法 在 所 有 的 分 辩 率 及 字号 下 清晰 地 显示 。 

经 过 详细 的 测试 ， 中 文字 体 在 12px、14px、16px (最 多 不 超过 18px) 的 字号 下 ， 显 示 得 最 为 清晰 美 
观 。 因 此 ， 多 数 网 站 都 应 使 用 12px 大 小 的 字体 作为 标准 字体 ， 而 将 14px 的 字体 作为 标题 字体 。 在 设计 
网 页 时 ， 尽 量 少 用 18px 以 上 的 字体 (输出 为 图 像 的 文本 除外 )。 在 字体 的 选择 上 ， 网 站 的 文本 是 给 用 户 
阅读 的 。 越 是 大 量 的 文本 ， 越 不 应 该 使 用 过 于 花哨 的 字体 。 

如 针对 的 用 户主 要 以 使 用 Windows XP 系统 和 纯 平 显示 器 为 主 , 则 应 使 用 宋体 或 新 宋体 等 作为 主要 字体 。 
如 果 用 户 是 以 使 用 Windows Vista 系统 和 液晶 显示 器 为 主 ， 则 应 使 用 微软 雅 黑 字体 ， 以 获得 更 佳 的 体验 。 


1.5.4 制作 网 页 概念 


在 设计 完成 网 页 的 各 种 界面 元 素 后 ， 即 可 根据 这 些 界 面 元 素 ， 使 用 Photoshop 或 Fireworks 等 图 像 处 


























| 另 画 画面 | 














图 1-10 网 站 结构 图 
























































网 页 设计 与 网 站 建设 自学 经 典 


理 软件 制作 网 页 的 概念 图 。 
网 页 概念 图 的 分 辩 率 应 照顾 到 用 户 的 显示 器 分 辩 率 。 针 对 国内 用 户 的 显示 器 设置 . 大 多 数 用 户 使 用 
的 都 是 17 英寸 甚至 更 大 的 显示 器 ， 分 辩 率 大 多 为 1024x768 以 上 。 去 除 浏览 器 的 垂直 滚动 条 后 ， 页 面 的 
宽度 应 为 1003px。 高 度 则 尽量 不 应 超过 屏幕 高 度 的 5 一 10 倍 ( 即 620x5=3100px 到 6200px 之 间 ) 。 
概念 图 的 作用 主要 包括 两 个 方面 。 一 方面 .设计 者 可 以 为 用 户 或 网 站 的 投资 者 在 网 页 制作 之 前 先 提 
供 一 份 网 页 的 预览 ,然后 根据 用 户 或 投资 者 的 意见 ， 对 网 页 的 结构 进行 调整 和 改良 。 另 一 方面 , 设计 者 
可 以 根据 概念 图 制作 切片 网 页 ， 然 后 再 根据 切片 快速 为 网 站 布局 ， 提 高 网 页 制作 的 效率 。 


1.5.5 切片 的 优化 


切片 的 优化 是 十 分 必要 的 。 优 化 后 的 切片 可 以 减 小 用 户 在 访问 网 页 时 消耗 的 时 间 ， 同 时 提高 网 页 制 
作 的 效率 。 

对 于 早期 以 调制 解 调 器 用 户 为 主 的 国内 网 络 而 言 ， 需 要 尽量 避免 大 面积 的 图 像 ， 防 止 这 些 图 像 在 未 
下 载 完成 时 网 页 出 现 空白 。 通 常 的 做 法 是 通过 切片 工具 将 图 像 切 为 多 块 ， 实 现 分 块 下 载 。 然 而 随 着 网 络 
传输 速度 的 发 展 ， 用 户 用 于 下 载 各 种 网 页 图 像 的 时 间 已 经 大 为 缩短 请求 下 载 图 像 的 时 间 已 超过 了 下 载 
图 像 本 身 的 时 间 。 下 载 1 张 100KB 的 图 像 ， 消 耗 的 时 间 要 比 下 载 10 张 10KB 的 图 像 更 少 ， 

因此 ， 多 数 网 站 都 开始 着 手 将 各 种 小 图 像 合并 为 大 的 图 像 ， 以 减少 用 户 请 求 下 载 的 时 间 ， 提 高 网 页 
的 访问 速度 。 


1.5.6 ”编写 代码 和 优化 页 面 


用 Photoshop 或 Fireworks 设计 完成 网 页 概念 图 ， 并 制作 切片 网 页 后 ， 最 终 还 是 需要 输出 为 
XHTML+CSS 的 代码 。 

网 页 技术 的 发 展 ， 使 网 页 的 制作 越 来 越 像 一 个 系统 的 软件 工程 。 从 基础 的 XHTML 结构 到 CSS 样式 
表 的 编写 ,再 到 JavaScript 交互 脚本 的 开发 ， 是 网 页 制作 的 收尾 工程 。 在 设计 完成 网 页 后 , 还 需要 对 网 页 
进行 优化 ， 提 高 页 面 访问 速度 ， 以 及 页 面 的 适应 性 。 

设计 者 应 按照 Web 标准 编写 各 种 网 页 的 代码 ,并 对 代码 进行 规范 化 测试 。 通 过 W3C 的 官方 网 站 验 
证 代码 的 准确 性 。 优 化 页 面 的 同时 , 还 应 根据 当前 主流 的 各 种 浏览 器 (下 10、360、Safari、Opera、Chrome 
等 ) 和 各 种 分 辩 率 的 显示 设备 测试 兼容 性 ， 编 写 CSS Hack 和 JavaScript 检测 脚本 ， 以 保证 网 页 在 各 种 浏 
览 器 中 都 可 正常 显示 。 


I 有 网 页 色彩 基础 


网 页 色彩 是 网 站 风格 表现 的 重要 组 成 部 分 ， 网 站 访问 者 最 先 受到 的 影响 就 是 一 个 网 站 的 配色 。 统 一 
风格 的 色彩 设计 不 仅 能 带 来 优秀 的 视觉 体验 . 色彩 所 表现 的 情感 与 内 涵 也 会 影响 到 访问 者 对 网 站 的 理解 。 
网 页 色彩 基础 的 内 容 主要 包括 RGB 色彩 体系 、 色 彩 的 属性 、 色 彩 模式 、 网 页 色彩 搭配 技巧 ,通过 对 
网 页 色彩 基础 知识 的 熟练 掌握 ， 可 以 让 设计 者 搭配 出 更 加 优秀 的 网 页 色彩 ， 吸引 更 多 的 网 民 浏 览 网 页 。 
1.6.1 RGB 色彩 体系 


人 类 的 眼睛 是 根据 所 看 见 的 光 的 波长 来 识别 颜色 的 。 肉 眼 可 识别 的 白色 太阳 光 . 导 
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长 的 光复 合 而 成 的 全 色光 。 根 据 全 色光 各 复合 部 分 的 波长 (长 波 、 中 波 和 短波 ) ， 可 以 将 全 色光 解析 为 三 
种 基本 颜色 ， 即 红 (Red)、 绿 (Green) 和 蓝 (Blue) 三 原色 光 。 

可 见 光 中 ， 绝 大 多 数 的 颜色 可 以 由 三 原色 光 按 不 同 的 比例 混合 
而 成 。 例 如 ， 当 三 种 颜色 以 相同 的 比例 混合 ， 则 形成 白色 : 而 当 三 
种 颜色 强度 均 为 0 时 ， 则 形成 黑色 。 计 算 机 的 显示 器 系统 就 是 利用 
三 原色 原理 ， 采 用 加 法 混 色 法 ， 以 描述 三 原色 在 各 种 可 见 光 颜 色 中 
占据 的 比例 来 分 析 和 描述 色彩 .从 而 确立 了 RGB 色彩 体系 .如 图 
1-11 所 示 。 


1.6.2 色彩 的 属性 


任何 一 种 色彩 都 具备 色相 、 饱 和 度 和 明度 三 种 基本 属性 ， 这 三 
种 基本 属性 又 被 称 作 色彩 的 三 要 素 。 修 改 这 三 种 属性 中 的 任意 一 种 ， 都 会 影响 原色 彩 其 他 要 素 的 变化 。 
1. 色相 

色相 是 由 色彩 的 波长 产生 的 属性 . 根据 波长 的 长 短 .可 以 将 可 见 光 划分 为 6 种 基本 色相 ， 即 红 、 橙 、 
黄 、 绿 、 蓝 和 紫 。 根 据 这 6 种 色相 可 以 绘制 一 个 色相 环 ， 表 示 6 种 颜色 的 变化 规律 。 
2. 饱和 度 

饱和 度 是 指 色彩 的 鲜艳 程度 ， 又 称 彩 度 、 纯 度 。 色 彩 的 饱和 度 越 高 ， 则 色相 越 明确 ， 反 之 则 越 弱 。 
饱和 度 取 决 于 可 见 光波 波长 的 单纯 程度 。 在 色彩 中 ,六 色色 相 环 中 的 6 种 基础 色 饱和 度 最 高 ， 黑 、 白 、 
灰 没 有 饱和 度 。 
3. 明度 

明度 是 指 色彩 的 明暗 程度 ， 也 称 光 度 、 深 浅 度 。 


色彩 的 明度 来 自 于 光波 中 振幅 的 大 小 。 色 彩 的 明度 越 贺 图 画 | 


高 ， 则 颜色 越 明亮 ， 反 之 则 越 阴暗 .如 图 1-12 所 示 。 


= 


黑色 。 在 有 彩色 系 中 .明度 最 高 的 是 黄色 ， 最 低 的 是 
紫色 。 图 1-12 色彩 明度 


1.6.3 ”色彩 模式 


自然 界 中 的 颜色 种 类 繁多 .单纯 以 颜色 的 名 称 来 表示 颜色 是 无 法 适应 平面 设计 及 工业 生产 需要 的 。 
因此 ， 人们 引入 了 色彩 模式 的 概念 。 色 彩 模式 是 表示 色彩 的 方法 。 在 不 同 的 应 用 领域 里 ， 表 示 色 彩 的 方式 
也 有 很 大 区 别 。 在 平面 设计 领域 ， 常 用 的 色彩 模式 主要 分 为 两 种 ， 即 RGB 色彩 模式 和 CMYK 色彩 模式 。 
1. RGB 色彩 模式 

RGB 色彩 模式 是 主要 应 用 于 输出 CRT (显示 器 ) 的 一 种 色彩 模式 . 其 采用 加 法 混 色 法 .以 描述 各 种 
可 见 光 在 颜色 中 占据 的 比例 来 分 析 色 彩 。RGB 色彩 的 基准 是 光学 三 原色 ( 红 、 绿 和 蓝 ) 。 
2. CMYK 色彩 模式 

CMYK 色彩 模式 是 主要 应 用 于 印刷 品 的 一 种 色彩 模式 ， 其 原理 是 根据 印刷 时 使 用 的 四 色 油 墨 混合 的 
比例 实现 各 种 色彩 .因此 属于 减法 混 色 法 . 如 图 1-13 所 示 。 


























图 1-11 RGB 色彩 体系 
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避 页 设计 与 网 站 建设 自学 经 典 





1.6.4 网 页 色彩 搭配 技巧 


在 选择 网 页 色彩 时 ， 除 了 考虑 网 站 本 身 的 特点 外 还 要 遵循 一 定 
的 艺术 规律 ， 从 而 设计 出 精美 的 网 页 。 打 开 一 个 网 站 ， 给 用 户 留 下 
第 一 印象 的 既 不 是 网 站 丰富 的 内 容 ， 也 不 是 网 站 合理 的 版 面 布局 . 
而 是 网 页 的 色彩 。 因 为 网 页 设计 属于 一 种 平面 效果 设计 ， 除 立体 图 
形 、 动 画 效果 之 外 ， 在 平面 图 上 ， 色 彩 的 冲击 力 是 最 强 的 ， 它 很 容 Y 
易 给 用 户 留 下 深刻 的 印象 。 因 此 ， 在 设计 网 页 时 必须 要 高 度 重视 色 名 
彩 的 搭配 。 

1. 特色 鲜明 

如 果 一 个 网 站 的 色彩 鲜明 ， 很 容易 引 人 注意 ， 会 给 浏览 者 耳目 图 1-13 CMYK 色彩 模式 
一 新 的 感觉 。 

2. 讲究 艺术 性 

网 页 设计 也 是 一 种 艺术 创作 ， 因 此 它 必须 遵循 艺术 规律 ， 设 计 者 在 考虑 到 网 站 本 身 特点 的 同时 ， 必 
须 按照 “内 容 决定 形式 ”的 原则 ， 大 胆 进行 艺术 创新 ， 设 计 出 既 符合 网 站 要 求 ， 又 有 一 定 艺术 特色 的 
网 页 。 

3. 黑色 的 使 用 

色彩 要 根据 主题 来 确定 ， 不 同 的 主题 选用 不 同 的 色彩 。 黑 色 是 一 种 特殊 的 颜色 .如果 使 用 恰当 、 设 
计 合理 往往 会 产生 很 强烈 的 艺术 效果 。 

4. 搭配 合理 

网 页 设计 虽然 属于 平面 设计 的 范畴 ， 但 它 又 与 其 他 平面 设计 不 同 ， 它 在 遵从 艺术 规律 的 同时 ， 还 考 
虑 人 的 生理 特点 .合理 的 色彩 搭配 能 给 人 一 种 和 谐 、 愉 快 的 感觉 。 

5. 背景 色 的 使 用 

背景 色 一 般 采 用 素 淡 、 清 雅 的 色彩 ， 应 避免 采用 花纹 复杂 的 图 片 和 纯度 很 高 的 色彩 作为 背景 色 ， 同 
时 背景 色 要 与 文字 的 色彩 对 比 强烈 一 些 。 


| 外因 | 网 站 策划 


网 站 在 建设 之 前 必须 认真 理解 客户 的 需求 ,将 客户 对 网 站 的 构思 落实 成 网 站 需求 文档 ， 并 与 客户 逐 
一 讨论 可 行 性 ， 在 需求 确认 后 ,网 站 策划 人 员 开 始 进行 网 站 策划 .根据 网 站 需求 说 明 书 设计 网 站 的 整体 
风格 和 网 站 结构 ， 并 提供 网 站 的 设计 策划 方案 与 客户 讨论 ， 在 客户 认可 网 站 策划 书后 .就 可 以 开始 对 网 
站 进行 设计 。 通 过 对 网 站 策划 的 学 习 ， 用户 可 以 了 解 网 站 的 前 期 制作 过 程 。 


1.7.1 确定 网 站 风格 和 布局 


在 目标 明确 的 基础 上 ， 完成 网 站 的 构思 创意 即 总 体 设计 方案 ， 对 网 站 的 整体 风格 和 特色 做 出 定位 ， 
规划 网 站 的 组 织 结构 。Web 站 点 应 针对 所 服务 对 象 的 不 同 而 具有 不 同 的 形式 。 有 些 站 点 只 提供 简洁 的 文 
本 信息 : 有 些 则 采用 多 媒体 表现 手法 ， 提 供 华丽 的 图 像 、 闪 烁 的 灯光 、 复 杂 的 页 面 布 置 ， 甚 至 可 以 下 载 
声音 和 录像 片段 。 
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好 的 Web 站 点 还 把 图 形 表现 手法 和 有 效 的 组 织 与 通信 结合 起 来 。 要 做 到 主题 鲜明 突出 、 要 点 明确 . 
应 以 简单 明确 的 语言 和 画面 体现 站 点 的 主题 。 还 要 调动 一 切 手段 充分 表达 站 点 的 个 性 和 情趣 .办 出 网 站 
的 特点 。Web 站 点 主页 应 具备 的 基本 成 分 包括 : 页 眉 ， 准 确 无 误 地 标识 站 点 和 企业 标志 : E-mail 地 址 ， 
用 来 接收 用 户 垂询 ; 联系 信息 ,如 普通 邮件 地 址 或 电话 :版权 信息 ,声明 版 权 所 有 者 等 。 注 意 重 复 利用 
已 有 信息 ， 如 客户 手册 、 公 共 关 系 文档 、 技 术 手 册 和 数据 库 等 可 以 轻而易举 地 用 到 企业 的 Web 站 点 中 。 

在 网 页 设计 前 ,首先 要 给 网 站 一 个 准确 的 定位 ， 是 用 来 宣传 自己 产品 的 一 个 窗口 ， 还 是 用 来 提供 商 
务 服务 或 者 提供 资讯 服务 性 质 的 网 站 或 者 其 他 特定 的 门户 网 站 .从 而 确定 主题 与 设计 风格 。 网 站 名 称 要 
切 题 ,题材 要 专 而 精 ， 并 且 要 兼顾 商家 和 客户 的 利益 。 在 主页 中 标题 起 着 很 重要 的 作用 . 一 个 好 的 标题 
在 符合 自己 主页 主题 和 风格 的 前 提 下 还 必须 有 概括 性 、 简 短 、 有 特色 且 容易 记 住 等 特点 。 


1.7.2 ”网 站 整体 规划 


在 设计 网 站 以 前 ， 需 要 对 网 站 进行 整体 规划 和 设计 ， 写 好 网 站 项 目 设计 书 ， 在 以 后 的 制作 中 按照 这 
些 规划 和 设计 进行 。 需 要 从 网 站 内 容 、 网 页 美术 效果 和 网 站 程序 的 构思 三 个 方面 进行 网 站 的 整体 规划 。 
1. 网 站 内 容 

在 网 站 开发 以 前 ,需要 构思 网 站 的 内 容 .确定 需要 突出 哪些 主要 内 容 。 例 如 个 人 网 站 .可 以 有 个 人 
文章 、 个 人 活动 、 生 活 照 片 、 才 艺 展示 、 个 人 作品 、 联 系 方式 等 内 容 。 还 需要 明确 哪些 是 主要 内 容 ， 哪 
些 是 需要 在 网 站 中 突出 制作 的 重点 。 
2. 网 页 美术 效果 

页 面 的 美术 效果 往往 决定 一 个 网 站 的 档次 ， 网 站 需要 有 美观 大 方 的 版 面 。 可 以 根据 个 人 的 喜好 、 页 
面 内 容 等 设计 出 自己 喜欢 的 页 面 效 果 。 如 果 是 个 人 网 站 ， 可 以 根据 个 人 的 特长 和 才艺 等 内 容 制作 出 夸张 
的 美术 作品 式 的 网 站 。 
3. 网 站 程序 的 构思 

还 需要 构思 网 站 的 功能 ， 网 站 的 这 些 功能 需要 由 什么 样 的 程序 来 实现 。 如 果 是 很 简单 的 个 人 主页 , 
则 不 需要 经 常 更 新 ， 更 不 必 编 程 做 动态 网 站 。 


1.7.3 搜集 、 整 理 素材 


网 站 的 设计 需要 相关 的 资料 和 素材 ， 丰 富 的 内 容 才 可 以 丰富 网 站 的 版 面 。 个 人 网 站 可 以 整理 个 人 的 
作品 、 照 片 、 展 示 等 资料 。 企 业 网 站 需要 整理 企业 的 文件 、 广 告 、 产 品 、 活 动 等 相关 资料 。 整 理 好 资料 
后 需要 对 资料 进行 筛选 和 编辑 。 

1. 图 片 

可 以 使 用 相机 拍摄 相关 图 片 ， 对 已 有 的 照片 可 以 使 用 扫描 仪 输入 到 计算 机 。 一 些 常见 图 片 可 以 在 网 
站 上 搜索 或 下 载 。 

2. 文档 

收集 和 整理 现 有 的 文件 、 广 告 、 电 子 表格 等 内 容 。 对 纸 制 文件 需要 输入 到 计算 机 形成 电子 文档 . 文 
字 类 的 资料 需要 进行 整理 和 分 析 。 

3. 媒体 内 容 

收集 和 整理 现 有 的 录音 、 视 频 等 资料 采集 的 内 容 必须 与 标题 相符 ， 在 采集 内 容 的 过 程 中 ， 应 注重 特 
色 。 主 页 应 该 突出 自己 的 个 性 .并 把 内 容 按 类 别 进行 分 类 ,设置 栏目 . 让 人 一 目 了 然 , 栏目 不 要 设置 得 
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太 多 . 最 好 不 要 超过 10 个 .层次 上 最 好 少 于 5 层 . 而 重点 栏目 最 好 能 直接 从 首页 看 到 .同时 要 保证 用 各 
种 浏览 器 都 能 看 到 主页 最 好 的 效果 。 

采集 到 的 内 容 涉 及 文字 资料 、 图 片 资料 、 动 画 资料 和 一 些 其 他 资料 ， 文 字 资 料 是 与 网 站 主题 相关 联 
的 文字 ， 要 做 到 抓 住 重点 、 简 洁 明了 。 图 片 资料 和 文字 资料 是 相互 配合 使 用 的 .都 是 为 主题 服务 ， 可 以 
增加 内 容 的 丰富 性 和 多 样 性 。 动 画 资料 可 以 增添 页 面 的 动态 性 .当然 还 有 一 些 如 应 用 软件 、 音 乐 文件 等 
的 相关 资料 需要 收集 。 


1.7.4 规划 站 点 、 制 作 网 页 


网 页 设计 是 一 个 复杂 而 细致 的 过 程 . 一 定 要 按照 先 大 后 小 、 先 简单 后 复杂 的 顺序 制作 。 所 谓 先 大 后 小 
就 是 说 在 制作 网 页 时 ， 先 把 大 的 结构 设计 好 ， 再 逐步 完善 小 的 结构 设计 。 所 谓 先 简单 后 复杂 ， 就 是 先 设计 
出 简单 的 内 容 ， 再 设计 复杂 的 内 容 ， 以 便 出 现 问题 时 好 修改 。 设 计 师 要 根据 站 点 目标 和 用 户 对 象 去 设计 网 
页 的 版 式 以 及 安排 网 页 内 容 。 一 般 来 说 ， 至 少 应 该 对 一 些 主要 的 页 面 设计 好 布局 ， 确 定 网 页 的 风格 。 

在 制作 网 页 时 要 灵活 运用 模板 和 库 ， 这 样 可 以 大 大 提高 制作 效率 。 如 果 很 多 网 页 都 使 用 相同 的 版 面 
设计 ， 就 应 为 这 个 版 面 设计 一 个 模板 ， 然 后 就 可 以 以 此 模板 为 基础 创建 网 页 。 以 后 如 果 想 要 改变 所 有 网 
页 的 版 面 设计 ， 只 需 简单 地 改变 模板 即 可 。 

切 图 是 网 页 设计 中 非常 重要 的 一 环 . 它 可 以 很 方便 地 为 我 们 标明 哪些 是 图 片区 域 、 哪 些 是 文本 区 域 。 
另外 ,合理 的 切 图 还 有 利于 加 快 网 页 的 下 载 速 度 、 设 计 复杂 造型 的 网 页 ， 以 及 对 不 同 特点 的 图 片 进行 压 
缩 等 优点 。 
页 面 设计 制作 完成 后 ， 如 果 还 需要 动态 功能 的 话 ， 就 需要 开发 动态 功能 模块 ,网 站 中 常用 的 功能 模 
块 有 搜索 功能 、 留 言 板 、 新 闻 信 息 发 布 、 在 线 购 物 、 技 术 统 计 、 论 坛 及 聊天 室 等 。 在 设计 之 前 ， 需 先 画 
出 网 站 结构 图 ， 其 中 包括 网 站 栏目 、 结 构 层 次 、 连 接 内 容 等 。 首 页 中 的 各 功能 按钮 、 内 容 要 点 、 友 情 链 
接 等 都 要 体现 出 来 ， 一定 要 切 题 ， 并 突出 重点 .同时 在 首页 上 应 把 大 段 的 文字 换 成 标题 性 的 、 吸 引 人 的 
文字 ， 将 单项 内 容 交 给 分 支 页 面 去 表达 ， 这 样 才 显得 页 面 精炼 。 此 处 ,设计 者 要 细心 周全 ， 不 要 遗漏 内 
容 ， 还 要 为 扩容 留 出 空间 。 

分 支 页 面 内 容 要 相对 独立 .切忌 重复 .导航 功能 性 要 好 。 网 页 文件 命名 开头 不 能 使 用 运算 符 、 中 文 
字符 等 ,分支 页 面 的 文件 存放 于 单独 的 文件 夹 中 ,图 形 文件 存放 于 单独 的 图 形 文件 夹 中 ,汉语 拼音 、 英 
文 缩写 、 英 文 原 义 均 可 用 来 命名 网 页 文件 。 在 使 用 英文 字母 时 ， 要 区 分 大 小 写 ， 建 议 在 构建 的 站 点 中 全 
部 使 用 小 写 的 文件 名 称 。 


1.7.5 发 布 与 上 传 


在 完成 了 页 面 制 作 后 , 就 应 该 将 其 发 布 到 Intemet 上 供 大 家 浏览 和 观赏 了 。 但 是 在 此 之 前 ,应 该 对 所 
创建 的 站 点 进行 测试 ， 对 站 点 中 的 文件 逐一 进行 检查 .在 本 地 计算 机 中 调试 网 页 以 防止 网 页 中 有 错误 , 
以 便 尽 早 发 现 问题 并 解决 问题 ， 在 测试 站 点 过 程 中 应 该 注意 以 下 几 个 方面 。 

(1) 在 测试 网 站 过 程 中 应 确保 在 目标 浏览 器 .网 页 如 预期 地 显示 和 工作 . 没有 损坏 的 链接 ， 以 及 下 
载 时 间 不 宜 过 长 等 。 了 解 各 种 浏览 器 对 Web 页 面 的 支持 程度 . 不 同 的 浏览 嚣 观看 同一 个 Web 页 面 . 会 有 
不 同 的 效果 。 很 多 制作 的 特殊 效果 ， 在 有 些 浏览 器 中 可 能 看 不 到 ， 为 此 需要 进行 浏览 器 兼容 性 检测 ， 以 
找 出 不 被 其 他 浏览 器 支持 的 部 分 。 

(2) 检查 链接 的 正确 性 ,可 以 通过 Dreamweaver 提供 的 检查 链接 功能 来 检查 文件 或 网 站 中 的 内 部 链 
接 及 孤立 文件 。 网 站 的 域名 和 空间 申请 完毕 后 . 就 可 以 上 传 网 站 了 .可 以 采用 Dreamweaver 自 带 的 站 点 
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管理 上 传 文件 。 
1.7.6 ”后 期 更 新 与 维护 


一 个 好 的 网 站 ,仅仅 一 次 是 不 可 能 制作 完美 的 ， 由 于 市 场 环境 在 不 断 地 变化 . 网 站 的 内 容 也 需要 随 
之 调整 给 人 常 新 的 感觉 ， 网 站 才 会 更 加 吸引 访问 者 ， 而 且 给 访问 者 很 好 的 印象 。 这 就 要 求 对 网 站 进行 
长 期 的 、 不 间断 的 维护 和 更 新 ， 网 站 维护 一 般 包含 以 下 内 容 。 
1. 内 容 的 更 新 

包括 产品 信息 的 更 新 、 企 业 新 闻 动 态 更 新 和 其 他 动态 内 容 的 更 新 。 采 用 动态 数据 库 可 以 随时 更 新 发 
布 新 内 容 ， 不 必 做 网 页 和 上 传 服务 器 等 麻烦 工作 。 静 态 页 面 不 便于 维护 必须 手动 重复 制作 网 页 文档 ， 
制作 完成 后 还 需要 上 传 到 远程 服务 器 。 一 般 对 于 数量 比较 多 的 静态 页 面 建议 采用 模板 制作 。 
2. 网 站 风格 的 更 新 

包括 版 面 、 配 色 等 各 种 方面 。 改 版 后 的 网 站 让 客户 感觉 改头换面 ， 焕然一新。 一般 改版 的 周期 要 长 
些 ， 客 户 对 网 站 也 满意 的 话 ， 改 版 可 以 延长 到 几 个 月 甚至 半年 。 一 般 一 个 网 站 建设 完成 以 后 ， 代 表 了 公 
司 的 形象 、 公 司 的 风格 。 

随 着 时 间 的 推移 ， 很 多 客户 对 这 种 形象 已 经 形成 了 定 势 。 如 果 经 常 改版 , 会 让 客户 感觉 不 适应 ， 特 
别 是 那 种 风格 彻底 改变 的 “改版 "。 当 然 如 果 对 公司 网 站 有 更 好 的 设计 方案 ,可 以 考虑 改版 。 毕 竟 长 期 沿 
用 一 种 版 面 会 让 人 感觉 陈旧 、 厌 烦 。 
3. 网 站 重要 页 面 设计 制作 

如 重大 事件 页 面 、 突 发 事件 及 相关 周年 庆祝 等 活动 页 面 设计 制作 。 网 站 系统 维护 服务 包括 E-mail 账 
号 维护 服务 、 域 名 维护 续费 服务 、 网 站 空间 维护 、 与 IDC 联系 、DNS 设置 、 域 名 解析 服务 等 。 


1.7.7 ”网 站 的 推广 


互联 网 的 应 用 和 繁荣 提供 了 广阔 的 电子 商务 市 场 和 商机 ,但 是 互联 网 上 大 大 小 小 的 各 种 网 站 数 以 百 
万 计 ， 如 何 让 更 多 的 人 都 能 迅速 地 访问 到 你 的 网 站 是 一 个 十 分 重要 的 问题 。 

企业 网 站 建 好 以 后 ， 如 果 不 进行 推广 ， 那 么 企业 的 产品 与 服务 在 网 上 就 仍然 不 为 人 所 知 ， 起 不 到 建 
立 站 点 的 作用 ， 所 以 企业 在 建立 网 站 后 即 应 着 手 利用 各 种 手段 推广 自己 的 网 站 。 网 站 的 推广 有 很 多 种 方 
式 ， 在 后 面 的 章节 中 将 详细 讲述 ， 这 里 就 不 再 叙述 了 。 


下 调 网 页 设计 与 网 站 建设 常用 软件 


本 节 将 介绍 网 页 设计 与 网 站 建设 经 常 使 用 的 软件 ， 了解 了 这 些 工 具 的 使 用 方法 后 ， 就 可 以 开始 做 一 
些 简 单 的 网 站 了 。 网 页 设计 与 网 站 建设 的 过 程 中 .主要 用 到 三 个 软件 一 一 网 页 代码 编写 软件 Dreamweaver、 
网 页 图 像 处 理 软件 Photoshop、 网 页 动画 设计 软件 Flash。 通 过 对 网 页 设计 与 网 站 建设 软件 的 学 习 ， 用户 
可 以 了 解 它们 的 基本 用 法 .为 后 期 的 网 站 制作 打下 基础 。 


1.8.1 编写 网 页 代码 软件 Dreamweaver 


Dreamweaver 是 集 网 页 制作 和 管理 于 一 身 的 所 见 即 所 得 网 页 编辑 器 ， 利 用 它 可 以 轻而易举 地 制作 出 
跨越 平台 限制 和 跨越 浏览 器 限制 的 充满 动感 的 网 页 ， 是 第 一 套 针 对 专业 网 页 设计 师 特别 发 展 的 视觉 化 网 









































网 页 设计 与 网 站 建设 自学 经 典 





页 开发 工具 。 

随 着 Dreamweaver 的 发 布 ， 人 们 可 以 使 用 可 视 化 的 方式 编辑 网 页 中 的 元 素 ， 由 软件 直接 生成 网 页 的 
代码 .Dreamweaver 的 出 现 提高 了 人 们 设计 网 页 的 效率 ,降低 了 代码 编写 的 工作 量 。 除 此 之 外 .Dreamweaver 
还 是 一 款 优秀 的 网 页 代码 编辑 器 ， 其 提供 了 强大 的 代码 提示 、 代 码 优化 以 及 代码 纠 错 功能 ， 并 内 置 了 多 
种 网 页 浏览 器 的 内 核 ， 人 允许 用 户 即 时 地 查看 编写 的 网 页 ， 纠 正在 多 浏览 器 下 的 兼容 性 问题 。 目 前 
Dreamweaver 已 经 成 为 网 页 设计 行业 必 备 的 工具 ， 如 图 1-14 所 示 。 
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图 1-14 Dreamweaver 的 工作 界面 


1.8.2” Dreamweaver 窗口 界面 


Dreamweaver 的 工作 界面 主要 由 以 下 几 部 分 组 成 : 菜单 栏 、 文 档 窗口 、 属 性 面板 和 面板 组 等 ， 如 
图 1-15 所 示 。 
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图 1-15 Dreamweaver 的 工作 界面 
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1. 菜单 栏 
菜单 栏 显示 的 菜单 包括 文件 、 编 辑 、 查 看 、 插 入 、 修 改 、 格 式 、 命 令 、 站 点 、 窗 口 、 帮 助 10 个 菜单 
， 如 图 1-16 所 示 。 
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图 1-16 菜单 栏 
2. 文档 窗口 
与 以 往 版 本 相 比 ，Dreamweaver 的 文档 窗口 更 加 灵活 多 样 ， 既 可 以 显示 网 页 文档 的 内 容 ， 又 可 以 显 
示 网 页 文档 的 代码 。 同 时 ， 用 户 还 可 以 使 之 同时 NN PN NNN 














显示 内 容 和 代码 等 信息 。 执 行 【 查 看 】| 【标尺 】| 
【显示 】 命 令 后 ， 用 户 可 将 标尺 工具 添加 到 文档 窗 
口中 ， 以 便 更 加 精确 地 设置 网 页 对 象 的 位 置 ， 如 
图 1-17 所 示 。 
3. 属性 面板 

属性 面板 包括 两 个 选项 ,一 种 是 HIML 选项 ， 
将 默认 显示 文本 的 格式 、 样 式 和 对 齐 方式 等 属性 。 3 i 
另 一 种 是 CSS 选项 ， 单 击 【属性 】 面 板 中 的 CSS “” 一 
选项 ,可 以 在 CSS 选项 中 设置 各 种 属性 ,如 图 1-18 图 1-17 文档 窗口 
所 示 。 
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图 1-18 【属性 】 面 板 


4. 面板 组 

Dreamweaver 中 的 面板 可 以 自由 组 合 而 成 为 面板 组 。 每 个 面板 组 都 可 以 展开 和 折 琶 并且 可 以 和 其 
他 面板 组 停靠 在 一 起 或 取消 停靠 。 面 板 组 还 可 以 停靠 到 集成 的 应 用 
程序 窗口 中 ， 这 样 就 能 够 很 容易 地 访问 所 需 的 面板 ， 而 不 会 使 工作 
区 变 得 混乱 ， 如 图 1-19 所 示 。 


1.8.3 网 页 图 像 处 理 软件 Photoshop 


Photoshop 是 由 Adobe 公 司 开发 的 一 款 功能 强大 的 二 维 图 形 图 像 
处 理 与 三 维 图 像 设计 软件 ， 主 要 处 理 以 像素 所 构成 的 数字 图 像 ， 可 
以 有 效 地 进行 图 片 编辑 工作 .通过 直观 的 用 户 体验 .使 用 户 更 轻松 地 使 用 其 无 与 伦比 的 强大 功能 。 
Photoshop 是 目前 专业 领域 最 流行 的 图 像 处 理 软件 .其 主要 处 理 以 像素 (Pixel) 构成 的 数字 图 像 . 利用 各 
种 绘图 工具 ， 对 图 像 进行 后 期 的 编辑 修改 。 

除了 编辑 修改 图 像 外 ，Photoshop 还 支持 导入 Jllustrator 等 软件 绘制 的 矢量 图 形 ， 对 这 些 矢量 图 形 进 
行 简单 的 处 理 。 在 网 页 设计 领域 , Photoshop 主要 被 用 来 进行 网 页 制作 前 期 的 工作 .包括 处 理 网 页 所 使 用 
的 各 种 图 像 ， 绘制 各 种 按钮 、 图 标 、 导 航 条 和 内 容 栏 等 界面 元 素 。 除 此 之 外 .其 还 可 以 制作 网 页 模板 . 





























图 1-19 面板 组 



































图 1-20 ”Photoshop 窗口 界面 


1.8.4 ”Photoshop 窗口 界面 


了 Photoshop 窗口 界面 与 Adobe 套装 保持 整体 一 致 的 风格 ， 打开 Photoshop 后 ， 即 可 进入 其 窗口 界面 ， 
如 图 1-21 所 示 。 

















图 1-21 Photoshop 窗口 界面 


1. 菜单 栏 
Photoshop 的 菜单 栏 选 项 可 以 执行 大 部 分 Photoshop 中 的 操作 , 它 包括 11 个 菜单 , 分 别 是 文件 . 编辑 、 
图 像 、 图 层 、 文 字 、 选 择 、 滤 镜 、3D、 视 图 、 窗 口 和 帮助 ， 如 图 1-22 所 示 。 

















图 1-22 菜单 栏 





【文件 】 菜 单 : 对 所 修改 的 图 像 进行 打开 、 关 闭 、 存 储 、 输 出 、 打 印 等 操作 。 
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【编辑 】 菜 单 : 编辑 图 像 过 程 中 所 用 到 的 各 种 操作 .如 拷贝 、 粘 贴 等 一 些 基本 操作 。 
【图 像 】 菜 单 ， 用 来 修改 图 像 的 各 种 属性 ， 包 括 图 像 和 画布 的 大 小 、 图 像 颜色 的 调整 等 。 
【图 层 】 菜 单 ， 图 层 基本 操作 命令 。 

【文字 】 菜 单 ， 用 于 设置 文本 的 相关 属性 。 

【选择 】 菜 单 :， 可 以 对 选区 中 的 图 像 添加 各 种 效果 或 进行 各 种 变化 而 不 改变 选区 外 
的 图 像 ， 还 提供 了 各 种 控制 和 变换 选区 的 命令 。 

【 滤 镜 】 菜 单 ， 用 来 添加 各 种 特殊 效果 。 

[3D】 菜单 :制作 3D 效果 。 

【视图 】 菜 单 ， 用 于 改变 文档 的 视图 ， 如 放大 、 缩 小 、 显 示 标 尺 等 。 

【窗口 】 菜 单 ， 用 于 改变 活动 文档 ， 以 及 打开 和 关闭 Photoshop 的 各 个 浮动 面板 。 

【帮助 】 菜 单 ， 用 于 查找 帮助 信息 。 
2. 工具 箱 

使 用 Photoshop 绘制 图 像 或 处 理 图 像 时 , 需要 在 工具 箱 中 选择 工具 . 如 图 1-23 所 示 。 
同时 需要 在 工具 选项 栏 中 进行 相应 的 设置 ， 如 图 1-24 所 示 为 工具 选项 栏 。 

Photoshop 的 工具 箱包 含 了 多 种 工具 , 单 击 工具 按钮 或 者 选择 工具 快捷 键 即 可 使 用 图 1-23 工具 箱 
这 些 工具 。 对 于 存在 子 工具 的 工具 组 来 说 ， 只 要 在 图 
标 上 右 击 或 按 住 鼠 标 左 键 不 放 ， 就 可 以 显示 出 该 工具 
组 中 的 所 有 工具 ， 如 图 1-25 所 示 。 



















































































































， 和 @ 模糊 具 
A 说 化 工具 
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图 1-25 子 工具 


3. 图 像 文档 窗口 
图 像 文 档 窗口 就 是 显示 图 像 的 区 域 . 也 是 编辑 和 处 理 图 像 的 区 域 。 在 图 像 窗 口中 可 以 实现 Photoshop 
中 的 所 有 功能 . 也 可 以 对 图 像 窗口 进行 多 种 操作 . 如 改变 窗口 大 小 和 位 置 、 对 窗口 进行 缩放 等 , 如 图 1-26 
所 示 。 

状态 栏 位 于 图 像 文件 窗口 的 最 底部 . 主要 用 于 显示 图 像 处 理 的 各 种 信息 . 如 图 1-27 所 示 。 



































图 1-26 图像 文档 窗口 


4. 面板 组 

在 默认 情况 下 ， 面 板 组 位 于 文档 窗口 的 右 侧 ， 其 主要 功能 是 查看 和 
修改 图 像 。 一 些 面板 中 的 菜单 提供 其 他 命令 和 选项 ， 如 图 1-28 所 示 。 

可 以 使 用 多 种 不 同方 式 组 织 工作 区 中 的 面板 .可 以 将 面板 存储 在 面 
板 箱 ” 中 ， 以 使 它们 不 干扰 工作 且 易 于 访问 ,或 者 可 以 让 常用 面板 在 工 
作 区 中 保持 打开 。 另 一 个 选项 是 将 面板 编组 .或 将 一 个 面板 停放 在 另 一 
个 面板 的 底部 。 图 1-28 默认 面板 


1.8.5 网 页 动画 设计 软件 Flash 


Flash 作为 目前 最 流行 的 网 页 动画 形式 ， 以 其 独特 的 魅力 吸引 了 无 数 的 用 户 。 在 网 站 开发 中 ， 各 种 网 
站 进入 动画 、 导 航 条 、 图 像 轮 换 动画 、 按 钮 动画 等 都 可 使 用 Flash 制作 。 在 动画 制作 领域 ，Flash 是 一 种 
易于 上 手 且 功能 强大 的 平面 或 立体 矢量 动画 软件 .被 广泛 应 用 在 各 出 版 发 行 、 广 告 、 商 业 设计 企业 中 。 
由 于 Flash 具有 制作 出 的 动画 体积 小 、 特 效 丰富 等 优势 ， 因 此 很 多 用 户 将 Flash 与 各 种 网 页 应 用 相 结 
合 ， 构 成 完整 的 富 互联 网 程序 。 除 了 设计 动画 外 ， Flash 还 具有 很 强 的 代码 编辑 能 力 。 使 用 Flash 可 以 方 
便 地 开发 出 各 种 小 型 应 用 ， 也 可 将 其 发 布 到 手机 等 数码 设备 中 进行 播放 ， 如 图 1-29 所 示 。 






















































































图 1-29 Flash 窗口 界面 
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1.8.6 ”Flash 窗口 界面 


Flash 是 Flash 系列 软件 中 的 最 新 版 本 ,打开 Flash 之 后 ， 即 可 进入 其 软件 的 窗口 界面 ， 如 图 1-30 
所 示 。 





图 1-30 Flash 窗口 界面 
1. 菜单 栏 
包含 所 有 的 功能 命令 ， 用 户 可 以 通过 单 击 所 需要 的 菜单 按钮 ， 在 弹出 的 下 拉 列 表 中 选择 相应 的 菜单 
命令 ， 如 图 1-31 所 示 。 











图 1-31 菜单 栏 





【文件 】 菜 单 : 用 于 一 些 基本 的 文件 管理 操作 . 如 打开 、 关 闭 、 导 入 等 命令 ,该 下 拉 菜 单 中 的 命令 都 
是 最 常用 和 最 基本 的 。 

【编辑 】 菜 单 : 用 于 进行 一 些 基本 的 编辑 操作 .如 复制 、 粘 贴 、 选 择 及 相关 设置 等 ， 它 们 都 是 动画 制 
作 过 程 中 很 常用 的 命令 。 

【视图 】 菜 单 : 用 于 屏幕 显示 的 控制 .如 缩放 、 网 格 、 贴 紧 和 隐藏 边缘 等 。 

【插入 】 菜 单 : 提供 的 多 维 插 入 命令 .例如 向 库 中 添加 元 件 、 在 动画 中 添加 场景 、 在 场景 中 添加 层 、 
在 层 中 添加 帧 等 操作 ， 都 是 制作 动画 时 所 需要 的 命令 组 

【修改 】 菜 单 : 用 于 修改 动画 中 各 种 对 象 的 属性 . 如 由 层 、 场 景 ， 甚 至 动画 本 身 等 . 这 些 命令 都 是 
进行 动画 编辑 时 必 不 可 少 的 重要 工具 。 

【文本 】 菜 单 : 提供 处 理 文本 对 象 的 命令 ， 如 字体 、 、 段 落 等 文本 编辑 命令 。 

【命令 】 菜 单 : 提供 了 命令 的 功能 集成 . ee 

【控制 】 菜 单 :相当 于 电影 动画 的 播放 控制 器 ,通过 其 中 的 命令 可 以 直接 控制 动画 的 播放 进程 和 状态 。 

【调试 】 菜 单 : 提供 了 影片 脚本 的 调试 命令 ,包括 跳 入 、 跳 出 、 设 置 断 点 等 。 

【窗口 】 菜 单 : 提供 了 所 有 的 工具 栏 、 编 辑 窗口 和 面板 . 是 当前 界面 形式 和 状态 的 总 控制 器 。 
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【帮助 】 菜 单 ， 包括 丰富 的 帮助 信息 .是 提供 的 帮助 资源 的 集合 。 
2. 工具 箱 

包含 动画 创建 中 所 需 的 图 形 绘制 、 视 图 查看 以 及 填充 颜色 和 颜料 桶 等 工具 ， 如 图 1-32 所 示 。 

这 些 工具 非常 有 特色 ， 使 用 得 当 的 话 完全 可 以 满足 用 户 日 常 工 
作 的 需求 .绘图 工具 栏 中 包括 如 下 各 种 工具 。 

【选择 工具 】 辆 :用 于 选择 对 象 ， 可 以 通过 拖 蝶 调 整 对 象 的 
位 置 。 

【部 分 选区 工具 】 辆 : 只 可 以 对 图 形 进行 变形 。 

【任意 变形 工具 】 国 :可 以 对 对 象 进行 任意 变形 . 

[渐变 变形 工具 】 国 可 以 对 填充 的 渐变 进行 调整 。 

【 套 索 工具 】 国 :用 于 抠 取 部 分 图 像 。 图 1-32 工具 箱 

【多 边 形 工具 】 国 与 套 索 工具 的 使 用 方法 基本 相同 .主要 以 
直线 线段 的 形式 对 对 象 进行 抠 取 。 

【魔术 棒 工具 】 国 国 ， 可 以 对 颜色 值 相近 的 图 形 进行 选区 。 

[钢笔 工具 】 国 ， 用 于 绘制 直线 和 曲线 。 

[文本 工具 】 国 :用 于 文本 的 创建 。 

【线条 工具 】 有 ;用 于 绘制 直线 。 

【 算 形 工具 】 国 ， 用 于 绘制 矩 形 。 

【基本 和 矩形 工具 】 有 ;用 于 绘制 矩形 和 圆 角 矩 形 。 

【椭圆 工具 】 攻 :用 于 绘制 椭圆 形 和 贺 形 。 

【基本 椭 加 工具】 国有 ， 用 于 绘制 不 规则 的 圆 形 。 

【多 角 星 形 工具 】 国 :可 以 绘制 多 边 形 和 星 形 . 

【铅笔 工具 】 轩 :可 以 随意 绘制 图 形 。 

【画笔 工具 】 轩 : 可 以 使 用 画笔 工具 进行 涂 色 。 

【颜料 桶 工具 】 轩 有 ， 用 于 为 图 形 填充 颜色 。 

【墨水 瓶 工具 】 国 国 ， 用 于 改变 线条 的 颜色 、 大 小 和 类 型 。 

[ 滴 管 工具 】 攻 I， 用 于 吸取 所 需要 的 颜色 并 对 图 形 进行 填充 。 

【 模 皮 工具 】 国 双 ， 用 于 控 除 不 需要 的 图 形 。 

用 于 对 当前 激活 的 绘图 工具 进行 设置 ， 选 项 内 容 是 随 着 用 户 选择 的 绘图 工具 的 变化 而 变化 的 。 每 个 
绘图 工具 都 有 自己 相应 的 属性 选项 ， 在 绘图 或 编辑 时 ， 应 当 在 选中 绘图 或 编辑 工具 后 ， 对 其 属性 进行 适 
当选 择 ， 才 能 顺利 实现 需要 的 操作 。 

3. 文档 编辑 区 

文档 编辑 区 的 作用 是 显示 Flash 打开 的 各 种 文档 ， 并 提供 各 种 辅助 工具 .帮助 用 户 编辑 和 浏览 文档 . 
如 图 1-33 所 示 。 

4. 面板 组 

面板 组 中 包括 【属性 】 面 板 、【 库 】 面 板 和 【工具 】 面 板 。 其 中 【属性 】 面 板 又 被 称 作 属 性 检查 器 . 
是 Flash 中 最 常用 的 面板 之 一 。 用 户 在 选择 Flash 影片 中 的 各 种 元 素 后 ， 即 可 在 【属性 】 面 板 中 修改 这 些 






































































































































元 素 的 属性 .如 图 1-34 所 示 。 













































































图 1-33 文档 编辑 区 图 1-34 面板 组 


【 库 】 面 板 的 作用 类 似 一 个 仓库 .其 中 存放 着 当前 打开 的 影片 中 的 所 有 元 件 。 用 户 可 直接 将 【 库 】 面 
板 中 的 元 件 拖 卸 到 舞台 场景 中 ,或 对 【 库 】 面 板 中 的 元 件 进行 复制 、 编 辑 和 删除 等 操作 。 








在 网 站 制作 过 程 中 ,一 般 的 静态 页 面 只 是 将 一 些 信息 固定 到 网 页 中 . 不 会 随 着 时 间或 者 用 户 权限 而 
改变 。 而 动态 网 站 则 可 以 根据 不 同时 间 、 不 同 地 域 、 不 同 访问 用 户 而 改变 其 内 容 。 在 动态 网 站 中 ,起 到 
关键 作用 的 是 数据 库 ， 它 用 于 存储 动态 网 站 中 的 所 有 内 容 . 并 根据 时 间 、 区 域 等 ， 通 过 网 页 读 取 不 同 的 
内 容 。 

本 章 主要 讲解 设计 网 站 、 使 用 网 站 【资源 】 面 板 、 创 建 本 地 站 点 、 数 据 及 数据 库 概 述 、 常 用 数据 库 
及 数据 库 的 作用 、Access 和 SQL Server 数据 库 。 通 过 对 本 章 的 学 习 ， 对 网 站 与 数据 库 技术 的 了 解 与 认识 ， 
可 以 帮助 我 们 更 好 地 制作 动态 网 站 。 
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设计 网 站 





在 制作 网 站 之 前 用 户 需 要 做 好 准备 工作 。 用 户 在 制作 一 个 站 点 时 ， 除 了 要 收集 并 制作 网 站 中 需要 的 
图 像素 材 ， 还 需要 对 网 站 的 相关 信息 进行 详细 的 了 解 . 文字 资料 也 是 十 分 重要 的 。 在 掌握 所 有 网 站 资料 
， 可 以 对 整个 网 站 的 布局 进行 规划 ， 并 考虑 与 设计 网 站 相关 的 一 些 外 部 因素 。 

本 节 主 要 讲述 站 点 与 访问 者 、 设 置 网 站 兼容 性 、 命 名 原则 、 设 定 站 点 的 风格 、 设 计 网 站 导航 方案 和 
规划 与 收集 网 站 资源 。 通 过 本 节 的 学 习 ， 为 后 面 的 网 站 建设 奠定 基础 。 


2.1.1 站 点 与 访问 者 


网 站 设计 的 计划 与 其 他 任何 设计 步骤 一 样 是 必 不 可 少 的 。 虽然 一 个 详细 的 计划 会 占据 相当 多 的 时 间 
但 是 它 能 使 网 站 具有 统一 的 外 观 和 视觉 ， 使 网 站 使 用 起 来 更 加 方便 、 快 捷 。 在 刚 开始 进行 站 点 的 创建 时 
为 了 确保 站 点 成 功 ,设计 者 应 按照 预定 的 规划 步骤 进行 。 即 便 创 建 的 是 一 个 很 简单 的 小 网 站 ,仔细 设计 
站 点 也 是 非常 有 用 的 ,这样 可 以 确保 站 点 的 每 个 浏览 者 都 能 够 成 功 使 用 网 站 。 

在 设计 和 规划 网 站 之 前 ， 用 户 需要 考虑 站 点 的 受众 群体 。 必 须 考虑 潜在 的 用 户 是 哪些 人 ， 对 站 点 与 
其 受众 的 清醒 认识 将 极 大 地 影响 网 站 的 设计 风格 。 在 确认 网 站 的 浏览 群体 后 ， 还 需要 确认 他 们 将 使 用 何 
种 设备 (平板 电脑 、 智 能 手机 或 台式 机 )、 网 络 连接 速度 和 浏览 软件 等 ， 不 同 的 设备 如 图 2-1 所 示 。 






































图 2-1 使 用 不 同 的 设备 浏览 网 站 


2.1.2 ”设置 网 站 兼容 性 


浏览 器 兼容 性 问题 又 被 称 为 网 页 兼容 性 或 网 站 兼容 性 问题 ， 该 问题 指 的 是 在 各 种 浏览 器 上 的 显示 效 
果 可 能 不 一 致 而 产生 浏览 器 和 网 页 间 的 兼容 问题 。 用 户 在 创建 网 站 时 做 好 浏览 器 兼容 ， 才 能 使 网 站 内 容 
在 不 同 的 浏览 器 上 都 能 够 正常 显示 。 

浏览 器 兼容 性 问题 的 产生 ， 是 因为 不 同 的 浏览 I TM 以 及 客 
户 端 、 移 动 端的 环境 不 同 (如 显示 分 辩 率 ) 造 成 的 显示 效果 不 同 。 最 常见 的 浏览 器 兼容 性 问题 是 网 页 元 素 位 
置 混乱 、 错 位 ， 如 图 2-2 所 示 。 
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图 2-2 浏览 器 兼容 性 问题 





目前 ,暂时 没有 统一 解决 浏览 器 兼容 性 问题 的 工具 ， 最 常用 的 解决 方法 是 不 断 地 在 各 种 浏览 器 之 间 
调试 网 页 显示 效果 ， 通 过 CSS 样式 控制 以 及 脚本 判断 赋予 不 同 浏览 器 的 解析 标准 。 

要 使 网 页 在 大 部 分 浏览 器 中 都 能 够 正常 显示 ， 用 户 除了 可 以 使 用 框架 以 外 ， 还 可 以 在 开发 网 页 的 过 
程 中 使 用 JS、CSS 框架 ， 如 jQuery、Mootools、960Grid System 等 ， 这 些 框架 无 论 是 底层 . 还 是 应 用 层 一 
般 都 已 经 做 好 了 浏览 器 兼容 ， 前 端 工程 师 在 开发 的 时 候 可 以 放心 使 用 。 除 此 之 外 ，CSS 还 提供 很 多 Hack 
接口 可 供 使 用 , Hack 既 可 以 实现 跨 浏览 器 兼容 . 也 可 以 实现 同一 浏览 器 不 同 版 本 的 兼容 。 不 过 , CSS Hack 
不 是 W3C 的 标准 , 虽然 能 迅速 区 分 浏览 器 版 本 ， 并 能 获得 大 概 一 致 的 效果 ,但 是 同时 也 可 能 引起 更 多 新 
的 错误 ， 因 此 ， 用 户 在 使 用 时 应 注意 取舍 ,不 要 轻易 使 用 CSS Hack。 

另外 ， 如 果 用 户 在 网 页 的 布局 、 动 画 、 多 媒体 内 容 以 及 交互 方面 使 用 的 较 多 并 且 比 较 复杂 ， 在 进行 
跨 浏览 器 时 它 的 兼容 性 就 比较 小 。 例 如 JavaScript 特效 并 不 是 在 所 有 的 浏览 器 中 都 可 以 运行 . 一 般 情况 下 
没有 使 用 特殊 字符 的 纯 文 本 网 页 可 以 在 任何 浏览 器 中 正确 地 显示 ,但 是 和 图 形 、 布 局 以 及 交互 的 页 面相 
比 ， 这 样 的 页 面 又 会 在 页 面 效果 上 欠缺 很 多 。 由 于 这 些 因素 ， 用 户 在 设计 网 页 时 应 在 制作 最 佳 效 果 的 同 
时 ,注重 保持 浏览 器 兼容 性 与 设计 之 间 的 平衡 。 


2.1.3 ”命名 原则 


在 一 开始 就 认真 地 组 织 站 点 可 以 减少 失误 并 节省 大 量 时 间 。 如 果 用 户 没有 考虑 文档 在 文件 夹层 次 结 
构 中 的 位 置 就 开始 使 用 Dreamweaver 创建 文档 ， 就 很 可 能 最 终 导 致 创建 一 个 充满 文件 的 巨大 文件 夹 , 使 
相关 的 文件 分 布 在 许多 名 称 类 似 的 网 站 目录 中 。 

在 设置 站 点 时 ， 用 户 可 以 在 本 地 磁盘 上 创建 一 个 包含 站 点 所 有 文件 的 文件 来， 将 其 作为 本 地 站 点 ( 参 
见 本 书 第 1 章 相关 内 容 ), 然后 在 该 文件 夹 中 创建 和 编辑 文档 。 在 准备 发 布 站 点 并 允许 浏览 者 查看 网 站 时 
再 将 这 些 文件 复制 到 Web 服务 器 上 即 可 。 这 种 方法 比 在 实时 公共 网 站 上 创建 和 编辑 文件 好 的 原因 是 : 它 
允许 在 公开 网 站 之 前 在 本 地 站 点 进行 站 点 测试 .如 果 有 需要 更 改 的 地 方 可 以 在 公开 之 前 先 更 改 ， 然 后 再 
上 传 本 地 站 点 并 更 新 整个 公共 站 点 。 
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在 组 织 站 点 的 过 程 中 . 文件 夹 命 名 应 规范 . 一般 采用 英文 . 长度 一 般 不 超过 20 个 字符 . 命名 采用 小 
写字 母 。 文件 名 称 统一 用 小 写 英文 字母 、 数 字 和 下 划 线 的 组 合 . 避免 使 用 如 “&"、“+"、“、 等 特殊 符号 . 
特殊 符号 会 导致 网 站 无 法 正常 工作 。 另 外 .不 重复 使 用 本 地 文件 夹 或 其 他 上 层 文件 夹 的 名 称 。 网 站 文件 
夹 命名 的 注意 事项 如 下 : 

(1) 命名 网 站 文件 夹 时 应 使 设计 者 能 够 方便 地 理解 每 一 个 文件 的 含义 。 

(2) 当 在 文件 夹 中 使 用 【 按 名 称 排列 】 命 令 时 ,同一 大 类 的 文件 夹 能 够 排列 在 一 起 。 

一 般 用 户 在 创建 本 地 站 点 时 ， 常 用 字母 组 合 来 创建 文件 夹 . 例如 image 或 img 用 于 存放 页 面 中 使 用 
的 图 片 文件 ，css 用 于 存放 css 样式 表 文 件 ，media 用 于 存放 多 媒体 文件 ， 如 图 2-3 所 示 。 



































共享 新 建文 件 去 
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图 2-3 本 地 站 点 目录 


2.1.4” 设 定 站 点 的 风格 


站 点 风格 指 的 是 网 站 整体 形象 给 浏览 者 的 综合 感受 ， 包括 站 点 的 UI (标志 、 色 彩 、 字 体 、 标 语 等 )、 
版 面 布局 、 浏 览 方式 、 交 互 性 、 文 字 、 内 容 价值 等 各 类 因素 。 

当 用 户 在 浏览 一 个 网 站 时 ， 一 般 会 有 这 样 的 情况 : 不 管 打开 网 站 的 任何 部 分 ， 它 们 的 每 个 页 面 风格 
都 会 保持 一 致 , 如 图 2-4 所 示 . 有 时 甚至 连 页 面 布局 都 差不多 。 实 际 上 这 就 是 网 站 的 一 致 性 特点 , 风格 与 
布局 的 一 致 ， 可 以 使 用 户 在 浏览 网 站 时 能 够 顺利 地 浏览 站 点 页 面 ， 而 不 会 因为 所 有 页 面具 有 不 同 的 外 观 
或 每 页 导航 位 置 不 同 而 感到 麻烦 。 
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图 2-4 网 站 页 面 的 风格 
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2.1.5 ”设计 网 站 导航 方案 


除了 网 站 站 点 和 页 面 的 设计 以 外 ， 用 户 在 制作 网 站 时 还 需要 设计 站 点 导航 。 在 设计 站 点 时 应 考虑 要 
给 访问 者 留 下 何 种 印象 ,访问 者 如 何 能 更 容易 地 从 网 站 的 一 个 区 域 移动 到 另 一 个 区 域 。 导 航 栏 的 形式 多 
种 多 样 ， 可 以 是 简单 的 文字 链接 ,也 可 以 是 设计 精美 的 图 片 或 丰富 多 彩 的 按钮 ,还 可 以 是 下 拉 菜 单 导航 , 
如 图 2-5 所 示 。 
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导航 设计 中 需要 考虑 以 下 几 点 : 

(1) 导航 信息 可 以 使 访问 者 很 容易 地 了 解 他 们 在 站 点 中 的 位 置 以 及 如 何 返回 顶级 页 面 。 

(2) 导航 在 整个 站 点 范围 内 应 一 致 ， 如果 将 导航 条 放 在 主页 面 的 首页 上 ， 用 户 就 需要 使 所 有 链接 的 
页 面 都 保持 和 首页 上 的 一 致 。 

(3) 在 导航 上 设置 搜索 和 索引 ， 使 访问 者 可 以 很 容易 地 找到 任何 正在 查找 的 信息 。 

(4) 是 否 为 访问 者 提供 站 点 有 问题 时 与 管理 员 联 系 的 方法 ， 以 及 公司 或 站 点 相关 人 员 联 系 方法 。 


2.1.6 ”规划 与 收集 网 站 资源 


网 站 最 不 可 或 缺 的 是 众多 的 资源 ， 资 源 可 以 是 图 像 、 文 本 或 媒体 等 。 在 开始 正式 制作 网 页 之 前 ， 要 
确保 收集 了 所 有 资源 并 做 好 了 准备 ， 如果 资源 太 少 可 能 会 出 现 工作 到 一 半 时 ， 由 于 找 不 到 一 幅 合 适 的 图 
片 来 创建 一 个 按钮 而 中 断 网 站 制作 。 

如 果 用 户 使 用 的 图 像 是 来 自 某 个 剪贴 画 的 图 像 和 图 形 ， 或 者 其 他 人 正在 创建 它们 ， 要 确保 将 它们 收 

集 并 放 在 站 点 的 一 个 文件 夹 中 。 网 站 资源 也 可 以 自己 创建 . 但 是 若 在 资源 中 使 用 鼠标 指针 经 过 图 像 技 术 
还 要 准备 需要 的 图 像 ， 然 后 组 织 相关 资源 ， 使 用 户 在 使 用 Dreamweaver 创建 站 点 时 可 以 方便 地 调用 . 网 
站 图 像 资源 如 图 2-6 所 示 。 
Dreamweaver 可 以 使 用 户 通过 使 用 模板 和 库 (参见 本 书 第 10 章 相关 内 容 ) ， 更 方便 地 在 各 种 文档 中 
重复 使 用 页 面 布 局 和 页 面 元 素 。 并 且 . 使 用 模板 和 库 创建 新 页 面 比 将 模板 和 库 应 用 于 现 有 文档 更 加 容易 。 
特别 是 在 创建 一 个 站 点 时 ,如 果 许多 页 面 都 要 使 用 同样 的 布局 ,用 户 就 可 以 先 为 该 布局 设计 和 规划 一 个 
模板 ， 然 后 就 可 以 基于 模板 创建 新 的 页 面 。 在 修改 文档 时 也 同样 方便 ， 用户 只 需要 修改 模板 的 共用 部 分 
即 可 。 
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图 2-6 网 站 图 像 资 源 


多 项 使 用 网 站 【资源 】 面 板 


在 Dreamweaver 软件 中 ， 用 户 可 以 通过 两 种 方法 使 用 【资源 】 面 板 ， 一 种 是 将 【资源 】 面 板 作为 简 
单 的 站 点 资源 列表 ， 另 一 种 是 将 某 些 个 人 喜爱 的 资源 集合 在 一 起 ， 作 为 收藏 资源 列表 。【 资 源 】 面 板 自动 
将 站 点 中 的 资源 添加 到 站 点 资源 列表 中 ， 默认 初始 时 收藏 资源 列表 是 空 的 ， 用 户 可 以 根据 需要 设置 收藏 
资源 列表 。 


2.2.1 查看 网 站 资源 


资源 在 【资源 】 面 板 中 分 为 不 同 的 类 别 ， 用 户 可 以 通过 单 击 类 别 按钮 选择 查看 其 中 的 某 个 类 别 。 除 
了 模板 和 库 对 象 只 有 一 种 列表 以 外 ， 其 他 类 别 都 有 两 种 视图 列表 模式 。 

【资源 】 面 板 中 两 种 列表 模式 的 具体 功能 如 下 。 

【站 点 】 列 表 : 该 列表 中 可 以 显示 所 选 站 点 中 的 所 有 资源 ,包括 在 站 点 中 的 任何 文档 使 用 的 图 像 、 颜 
色 、URL 等 。 

【收藏 】 列 表 : 该 列表 中 仅 显 示 个 人 喜好 选择 的 资源 集合 ， 它 和 站 点 列表 并 没有 太 大 区 别 ， 只 是 有 些 
任务 只 能 在 收藏 列表 中 进行 操作 。 

默认 情况 下 ， 各 个 类 别 中 的 资源 按 名 称 的 字母 顺序 列 出 。 用 户 可 以 根据 其 他 标准 对 资源 进行 排列 。 
通过 【资源 】 面 板 能 够 预览 某 一 个 类 别 中 的 资源 ， 并 通过 拖 动 相 邻 两 个 列 名 字 中 间 的 分 隔 符号 ， 更 改 各 
列 预览 区 域 的 大 小 。 


2.2.2 ”选择 资源 类 别 


在 【资源 】 面 板 中 .通过 使 用 图 标的 标识 可 以 使 用 户 快速 地 找到 需要 的 资源 .而 通过 在 【资源 】 面 
板 中 的 分 类 可 以 使 所 有 资源 显示 在 不 同类 别 的 站 点 资源 列表 中 (无 论 这 些 文件 是 否 被 使 用 )。 用 户 若 要 查看 
某 一 个 类 别 的 资源 ， 可 以 单 击 资源 类 别 中 的 类 别 ， 具体 如 下 。 
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“图 像 ”类 别 : 用 于 存放 GIF、JPEG 和 PNG 等 格式 的 图 像 文件 。 

“颜色 ”类 别 : 用 于 存放 文件 或 样式 表 中 使 用 的 颜色 集合 . 包括 文本 颜色 、 背 景 颜色 和 链接 颜色 等 。 

URLs 类 别 : 用 于 存放 当前 站 点 文件 中 使 用 的 外 部 URL 链接 。 该 类 别 通常 包括 本 地 文件 (file://)。 

SWF 类 别 : 用 于 存放 在 网 页 中 需要 用 到 的 由 Flash 生成 的 动画 格式 文件 。 此 类 软件 中 仅 显 示 Flash 动 
画 压缩 文件 Cswf 格式 )， 而 不 显示 Flash 源 文件 (la 格式 )。 

“影片 ”类 别 : 用 于 存放 QuickTime 或 MPEG 的 动态 影像 格式 文件 。 

“脚本 ”类 别 : 当 使 用 JavaScript 生成 脚本 文件 时 ， 可 以 存放 在 这 个 类 别 中 。 在 HTML 文件 中 直接 编 
写 的 脚本 并 不 包含 在 资源 列表 中 ， 资 源 类 别 显 示 的 是 独立 的 脚本 文件 。 

“模板 ”类 别 : 给 用 户 提供 了 一 种 方便 的 方法 ， 可 以 通过 模板 页 面 生成 许多 相似 页 面 布 局 的 页 面 ， 极 
大 地 提高 了 页 面 编辑 和 修改 的 效率 。 

Shockwave 类 别 : 用 于 存放 任何 版 本 的 Shockwave 格式 动画 文件 。 

“ 库 ” 类 别 : 在 多 个 页 面 中 可 以 重复 使 用 的 元 素 ， 可 以 极 大 地 提高 页 面 元 素 编辑 和 修改 的 效率 。 库 对 
象 的 更 新 ， 将 使 用 库 对 象 的 页 面 自动 同步 更 新 。 


2.2.3 ”选择 与 编辑 资源 


在 【资源 】 面 板 的 收藏 资源 中 ， 大 多 数 的 资源 在 使 用 时 是 不 能 满足 网 页 制作 需求 的 ， 在 该 面板 中 ， 
Dreamweaver CS6 不 仅 可 以 使 用 户 同时 选中 多 个 资源 ， 还 提供 了 编辑 资源 的 快捷 方法 ,具体 如 下 。 

选择 资源 ， 在 【资源 】 面 板 中 选择 多 个 资源 只 需 在 按 住 Shift 键 的 同时 ， 单 击 一 个 资源 ， 然 后 再 单 击 
另 一 个 资源 ， 即 可 选取 这 两 个 资源 间 的 所 有 文件 。 

编辑 资源 ， 在 【资源 】 面 板 中 选择 资源 ， 然 后 单 击 面板 底部 的 【编辑 】 按 钮 国 ， 根 据 资源 的 类 型 对 
资源 进行 编辑 。 

为 了 不 损坏 其 他 的 站 点 ， 若 要 在 站 点 间 移 动 和 使 用 资源 ， 就 需要 清楚 地 了 解 当前 资源 所 在 的 站 点 ， 
资源 使 用 才 会 更 方便 和 安全 。【 资 源 】 面 板 通常 会 按照 一 定 的 属性 排列 所 有 当前 站 点 的 资源 。 要 在 一 个 站 
点 中 使 用 另 一 个 站 点 的 资源 ， 就 需要 把 资源 从 另外 的 站 点 复制 到 当前 站 点 。 


2.2.4 刷新 【资源 】 面 板 


在 制作 一 个 比较 复杂 的 网 页 时 ,用户 需要 的 文件 资源 很 多 , 文件 量 很 大 , 在 修改 的 时 候 就 需要 在 【 资 
源 】 面 板 中 对 修改 后 的 文件 进行 刷新 ， 以 便 创 建新 的 资源 列表 。 但 是 ， 有些 更 改 并 不 会 立即 在 【资源 】 
面板 中 体现 ， 例 如 当 用 户 在 站 点 中 添加 或 删除 资源 文件 时 .【 资 源 】 面 板 的 列表 并 不 会 立刻 发 生 改 变 ,或 
当 用 户 在 站 点 中 删除 某 些 资源 (或 保存 了 某 个 新 文件 )， 而 文件 中 包含 站 点 原来 没有 的 新 资源 (如 颜色 )， 这 
时 就 需要 对 【资源 】 面 板 进行 手动 更 新 ， 具 体 方法 如 下 。 
STEP|01 在 【资源 】 面 板 中 选中 位 于 面板 顶部 的 【站 点 】 单 选 按钮 ， 以 便 确 定 是 在 当前 站 点 资源 列表 中 
进行 操作 。 
STEP|02 单 击 【资源 】 面 板 底部 的 【刷新 站 点 列表 】 按 钮 图 . 面板 将 读 取 缓 存 文件 的 资料 更 新 列表 显示 。 
此 外 . 用户 还 可 以 通过 手动 方式 重建 站 点 缓存 并 刷新 “站 点 ”列表 . 在 【资源 】 面 板 中 右 击 资源 列 
表 ， 然后 在 弹出 的 菜单 中 选中 【刷新 站 点 列表 】 命 令 即 可 。 
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2.2.5 ”管理 【资源 】 面 板 


【资源 】 面 板 的 【站 点 】 列 表 显 示 站 点 内 所 有 的 可 识别 资源 . 该 列表 对 于 一 些 大 型 的 网 站 来 说 就 会 变 
得 十 分 繁杂 。 如 果 这 样 ， 用 户 可 以 将 常用 的 资源 添加 到 【收藏 】 列 表 中 .并 给 它们 重 命名 , 或 者 将 相关 
的 资源 归 为 一 类 放 在 一 个 新 建 的 收藏 夹 中 . 这样 可 以 提醒 用 户 这 些 资源 的 用 途 ， 也 方便 在 【资源 】 面 板 
中 查找 需要 的 资源 。 

在 【收藏 】 列 表 中 增删 资源 

要 在 【收藏 】 列 表 中 增加 资源 . 用 户 可 以 在 【站 点 】 列 表 中 选中 一 个 或 多 个 资源 ， 然 后 单 击 该 面板 
底部 的 【添加 到 收藏 夹 】 按 钮 。 如 果 需 要 从 【收藏 】 列 表 中 删除 某 个 资源 ， 可 以 在 【资源 】 面 板 的 【 收 
藏 】 列 表 中 选中 该 资源 ， 然 后 单 击 面板 底部 的 【从 收藏 中 删除 】 按 钮 即 可 。 

用 户 在 【收藏 】 列 表 中 增加 的 资源 ， 是 不 能 添加 到 【站 点 】 列 表 中 的 ， 因 为 【站 点 】 列 表 只 包含 站 
点 已 名 di 模板 和 库 项 目 没有 【收藏 】 列 表 ， 所 以 没有 【站 点 】 列 表 和 【收藏 】 列 表 的 区 别 。 
2. 为 资源 重 命 
在 【资源 】 pe 用 户 可 以 给 【收藏 】 列表 中 常用 的 资源 重 命名 。 例 如, 如 果 有 一 个 属性 值 为 “#282828” 
的 颜色 ， 则 可 以 使 用 带 有 描述 性 的 文字 来 代替 . 例如 “背景 色 "、“ 重 要 文字 色 ” 等 。 这 样 ， 当 需要 使 用 
的 时 候 就 可 以 很 快 找到 并 使 用 ， 具 体 方法 如 下 。 
STEP|01 在 【资源 】 面 板 中 ,选择 包含 该 资源 的 类 别 ， 然 后 选中 【收藏 】 单 选 按钮 以 显示 【收藏 】 列表。 
STEP|02 接 下 来 ,在 【资源 】 面 板 中 右 击 列表 中 资源 的 名 称 或 图 标 ,然后 在 弹出 的 菜单 中 选中 【编辑 别 
名 】 命 令 。 在 为 资源 输入 一 个 名 称 后 ， 按 Enter 键 确定 。 此 时 ,收藏 资源 将 按 别名 显示 在 列表 中 。 
3. 将 资源 归 类 至 收藏 夹 中 

为 了 更 方便 地 管理 网 站 资源 ， 在 【资源 】 面 板 的 列表 中 ， 用 户 可 以 将 资源 归 类 到 文件 夹 形式 的 【 收 
藏 】 列 表 中 ,例如 将 大 量 数据 表格 页 面 的 图 片 资源 归 类 组 合 为 “统计 图 片 夹 "。 将 资源 归 类 到 收藏 夹 的 具 
体操 作 方法 如 下 。 
STEP|01 创建 收藏 夹 ， 然 后 选中 位 于 【资源 】 面 板 项 部 的 【收藏 】 单 选 按钮 显示 【收藏 ”列表 。 
STEP|02 单 击 【资源 】 面 板 底部 的 【新 建 收藏 夹 】 按 钮 ， 并 为 该 文件 夹 输入 一 个 名 称 ， 按 Enter 键 确定 。 
STEP|03 完成 以 上 操作 后 ， 将 资源 拖 描 至 创建 的 文件 夹 中 即 可 。 


后 调 创建 本 地 站 点 


在 Dreamweaver 软件 中 ， 用户 可 以 创建 本 地 站 点 ， 本 地 站 点 是 本 地 计算 机 中 创建 的 站 点 ， 其 所 有 的 
内 容 都 保存 在 本 地 计算 机 硬盘 上 .本 地 计算 机 可 以 被 看 成 是 网 络 中 的 站 点 服务 器 。 本 节 将 通过 实例 操作 . 
详细 介绍 在 本 地 计算 机 上 创建 与 管理 站 点 的 方法 。 


2.3.1 站 点 概述 


互联 网 中 包括 无 数 的 网 站 和 客户 端 浏览 器 .网 站 宿主 于 网 站 服务 器 中 . 它 通过 存储 和 人 解析 网 页 的 内 
容 ， 向 各 种 客户 端 浏览 器 提供 信息 浏览 服务 。 ppt ent a 
件 会 在 完成 对 网 页 内 容 的 解析 工作 后 .将 解析 的 结构 回馈 给 网 络 中 要 求 访问 该 网 页 的 浏览 器 ， 其 流程 如 
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图 2-7 所 示 。 





服务 器 端 网 页 文件 


图 2-7 网 站 服务 器 、 网 页 和 浏览 器 


1. 网 站 服务 器 与 本 地 计算 机 

一 般 情况 下 ， 网 络 上 可 以 浏览 的 网 页 都 存储 在 网 站 服务 器 中 .网 站 服务 器 是 指 用 于 提供 网 络 服务 ( 例 
如 WWW、FTP、E-mail 等 ) 的 计算 机 ， 对 于 WWW 浏览 服务 ， 网 站 服务 器 主要 用 于 存储 用 户 所 浏览 的 
Web 站 点 和 页 面 。 

对 于 大 多 数 网 页 访问 者 而 言 ， 网 站 服务 器 只 是 一 个 逻辑 名 称 ,不 需要 了 人 解 服务 器 具体 的 性 能 、 数 量 、 
配置 和 地 址 位 置 等 信息 。 用 户 在 浏览 器 的 地 址 栏 中 输入 网 址 后 ， 即 可 轻松 浏览 网 页 。 浏 览 网 页 的 计算 机 
就 称 为 本 地 计算 机 ,只 有 本 地 计算 机 才 是 真正 的 实体 。 本 地 计算 机 和 网 站 服务 器 之 间 通 过 各 种 线路 (包括 
电话 线 、ISDN 或 其 他 线 缆 等 ) 进 行 连接 ， 以 实现 相互 间 的 通信 。 

2. 本 地 站 点 和 网 络 远 程 站 点 

网 站 由 文档 及 其 所 在 的 文件 夹 组 成 ， 设 计 完善 的 网 站 都 具备 科学 的 体系 结构 ， 利 用 不 同 的 文件 夹 ， 
可 以 将 不 同 的 网 页 内 容 进行 分 类 组 织 和 保存 。 

在 互联 网 上 浏览 各 种 网 站 , 其实 就 是 用 浏览 器 打开 存储 于 网 站 服务 器 上 的 网 页 文档 及 其 相关 的 资源 , 
由 于 网 站 服务 器 的 不 可 知 特性 ， 通 常 将 存储 于 网 站 服务 器 上 的 网 页 文档 及 其 相关 资源 称 为 远程 站 点 。 

利用 Dreamweaver 系列 软件 ， 用 户 可 以 对 位 于 网 站 服务 器 上 的 站 点 文档 直接 进行 编辑 和 管理 ， 但 是 
由 于 网 速 和 网 络 传输 的 不 稳定 等 因素 ， 将 对 站 点 的 管理 和 编辑 带 来 不 良 影 响 。 用 户 可 以 先 在 本 地 计算 机 
上 构建 出 整个 网 站 的 框架 ， 并 编辑 相关 的 网 页 文档 ， 然 后 再 通过 各 种 上 传 工具 将 站 点 上 传 到 远程 的 网 站 
































3. Internet 服务 程序 

在 某 些 特殊 情况 下 (如 站 点 中 包含 Web 应 用 程序 )， 用 户 在 本 地 计算 机 上 是 无 法 对 站 点 进行 完整 测试 
的 ， 这 时 就 需要 借助 Internet 服务 程序 来 完成 测试 。 

在 本 地 计算 机 上 安装 Internet 服务 程序 . 实际 上 就 是 将 本 地 计算 机 构建 成 一 个 真正 的 Internet 服务 器 ， 
用 户 可 以 从 本 地 计算 机 上 直接 访问 该 服务 器 .这 时 计算 机 已 经 和 网 站 服务 器 合 二 为 一 。 
4. 网 站 文件 的 上 传 与 下 载 

下 载 是 资源 从 网 站 服务 器 传输 到 本 地 计算 机 的 过 程 . 而 上 传 则 是 资源 从 本 地 计算 机 传输 到 Internet 服 
务 器 的 过 程 。 

用 户 在 浏览 网 页 的 过 程 中 ,上 传 和 下 载 是 经 常 使 用 的 操作 。 如 浏览 网 页 就 是 将 Intemet 服务 器 上 的 网 
页 下 载 到 本 地 计算 机 上 .然后 进行 浏览 。 用 户 在 使 用 E-mail 时 输入 用 户 名 和 密码 .就 是 将 用 户 信息 上 传 
到 网 站 服务 器 。Dreamweaver 软件 内 置 栏 强 大 的 FTP 功能 ,可 以 帮助 网 站 设计 者 将 网 站 服务 器 上 的 站 
点 结构 及 其 文档 下 载 到 本 地 计算 机 中 .经 过 修改 后 再 上 传 到 网 站 服务 器 上 .并 最 终 实现 对 站 点 的 同步 与 
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更 新 。 
2.3.2 ”规划 站 点 


用 户 在 规划 网 站 时 .应 明确 网 站 的 主题 ， 并 搜集 所 需要 的 相关 信息 。 规 划 站 点 指 的 是 规划 站 点 的 结 
构 ， 完成 站 点 的 规划 后 在 创建 站 点 时 既 可 以 创建 一 个 网 站 . 也 可 以 创建 一 个 本 地 网 页 文件 的 存储 地 址 。 
1. 规划 站 点 的 目录 结构 

站 点 的 目录 指 的 是 在 建立 网 站 时 存放 网 站 文档 所 创建 的 目录 .网 站 目录 结构 的 好 坏 对 于 网 站 的 管理 
和 维护 至 关 重 要 。 在 规划 站 点 的 目录 结构 时 ， 应 注意 以 下 几 点 : 

(1) 使 用 子 目录 分 类 保存 网 站 栏目 的 内 容 文档 。 应 尽量 减少 网 站 根 目 录 中 的 文件 存放 数量 。 要 根据 
网 站 的 栏目 在 网 站 根 目 录 中 创建 相关 的 子 目 录 。 

(2) 站 点 的 每 个 栏目 目录 下 都 要 建立 image、music 和 flash 目录 ， 以 存放 图 像 、 音 乐 、 视 频 和 Flash 
文件 。 

(3) 避免 目录 层次 太 深 。 网 站 目录 的 层次 最 好 不 要 超过 三 层 ， 因 为 太 深 的 目录 层次 不 利于 维护 与 
管理 。 

(4) 不 要 使 用 中 文 作为 目录 名 。 

(5) 避免 使 用 太 长 的 站 点 目录 名 。 

(6) 使 用 意义 明确 的 字母 作为 站 点 目录 名 称 。 

2. 规划 站 点 的 链接 结构 

站 点 的 链接 结构 是 指 站 点 中 各 页 面 之 间 相 互 链接 的 拓扑 结构 ， 规 划 网 站 的 链接 结构 的 目的 是 利用 尽 

量 少 的 链接 达到 网 站 的 最 佳 浏览 效果 ， 如 图 2-8 所 示 。 















































图 2-8 站 点 链接 结构 


通常 ， 网 站 的 链接 结构 包括 树 型 链接 结构 和 星 型 链接 结构 ， 在 规划 站 点 链接 时 应 混合 应 用 这 两 种 链 
接 结构 设计 站 点 内 各 页 面 的 链接 ， 尽 量 使 网 站 的 浏览 者 既 可 以 方便 快捷 地 打开 自己 需要 访问 的 网 页 ， 又 
能 清晰 地 知道 当前 页 面 处 于 网 站 内 的 确切 位 置 。 

规划 一 个 网 站 的 站 点 目录 结构 和 链接 结构 的 步骤 举例 如 下 。 
STEP|01 在 本 地 计算 机 的 DD 盘 中 新 建 一 个 文件 夹 ， 重 命名 该 文件 夹 为 WebSite。 
STEP|02 打开 该 文件 夹 . 在 该 文件 夹 中 创建 “个 人 简介 ”文件 夹 用 于 存储 【个 人 简介 】 栏 目 中 的 文档 ; 
创建 “日 志 ” 文 件 夹 . 用 于 存储 【日 志 】 栏 目 中 的 文档 : 继续 创建 “相册 ”“ 收 藏 ”等 文件 夹 ， 用 于 存 
储 对 应 栏目 中 的 文档 。 
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STEPI03 打开 “个 人 简介 ”文件 夹 . 然后 在 该 文件 夹 中 创建 “基本 资料 ” “详细 资料 ”文件 夹 。 重 复 操 
作 ， 分别 在 其 他 文件 夹 中 创建 相应 文件 夹 ， 存储 相 应 的 文件 ,完成 网 站 的 目录 结构 。 


STEP|04 根据 创建 的 文件 夹 . 规划 个 人 网 站 的 站 点 目录 结构 和 链接 结构 . 如 图 2-9 所 示 。 





























图 2-9 规划 网 站 目录 结构 与 链接 结构 


2.3.3 ”建立 本 地 站 点 


在 网 络 中 创建 网 站 之 前 一般 需要 在 本 地 计算 机 上 将 整个 网 站 完成 ， 然 后 再 将 站 点 上 传 到 Web 服务 
器 上 。 在 Dreamweaver 软件 中 ， 创 建站 点 既 可 以 使 用 软件 提供 的 向 导 创 建 ， 也 可 以 使 用 高 级 面板 创建 。 
1. 通过 向 导 创 建 本 地 站 点 

下 面 通过 实例 来 介绍 在 Dreamweaver 中 使 用 向 导 创建 本 地 站 点 的 具体 操作 方法 。 

STEP|01 在 Dreamweaver 中 选择 【站 点 】| 【新 建站 点 】 命 令 ， 打 开 【 站 点 设置 对 象 】 对 话 框 。 
STEP|02 在 【站 点 设置 对 象 】 对 话 框 中 单 击 【 站 点 】 类 别 ， 显 示 该 类 别 下 的 选项 区 域 ， 然 后 在 【站 点 名 
称 】 文 本 框 中 输入 站 点 名 称 “ 测 试 站 点 1”。 

STEP|03 单 击 【 浏 览 文件 夹 】 按 钮 ， 打开 【选择 根 文件 夹 】 对 话 框 ， 然 后 选择 本 地 站 点 文件 夹 WebSite 
并 单 击 【 选 择 】 按 钮 。 

















2. 使 用 高 级 面板 创建 站 点 

在 Dreamweaver 中 . 选择 【站 点 】|【 新 建站 点 】 命 令 . 打开 【站 点 设置 对 象 】 对 话 框 ， 然后 选中 【高 
级 设置 】 类 别 ， 即 可 展开 选项 区 域 ， 在 该 选项 区 域 中 用 户 可 以 设置 创建 站 点 的 详细 信息 ， 具 体 如 下 。 

(1) 【默认 图 像 文件 夹 】 文 本 框 : 单 击 该 文本 框 后 面 的 【浏览 文件 夹 】 按 钮 ， 可 以 在 打开 的 【选择 
图 像 文件 夹 】 对 话 框 中 设 定 本 地 站 点 的 默认 图 像 文件 夹 存储 路 径 。 

(2) 【链接 相对 于 】: 在 站 点 中 创建 指向 其 他 资源 或 页 面 的 链接 时 指定 创建 的 链接 类 型 。 

(3) Web URL: Web 站 点 的 URL。Dreamweaver 使 用 Web URL 创建 站 点 根 目录 相对 链接 ， 并 在 使 
用 链接 检查 器 时 验证 这 些 链接 。 


用 并 数据 及 数据 库 概述 


数据 库 是 用 于 存储 数据 内 容 的 .可 以 将 生活 中 的 一 个 事件 或 者 一 类 问题 存储 到 数据 库 中 。 本 节 主 要 
讲解 三 个 内 容 ， 即 数据 与 信息 、 数 据 库 和 数据 库 管 理 系 统 。 用 户 通 过 学 习 数 据 库 的 一 些 基本 概念 ， 有 助 
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于 更 好 地 了 解数 据 库 。 
2.4.1 数据 与 信息 


为 了 了 解 世界 、 交 流 信息 ， 人们 需要 描述 事物 。 在 日 常生 活 中 ， 可 以 直接 用 自然 语言 (如 汉语 ) 来 
描述 。 如 果 需 要 将 这 些 事务 记录 下 来 ， 便 需要 将 事务 变 成 信息 进行 存储 ， 而 信息 是 对 客观 事务 属性 的 反 
映 ， 也 是 经 过 加 工 处 理 并 对 人 类 客观 行为 产生 影响 的 数据 表现 形式 。 

例如 ， 在 计算 机 中 .为 了 存储 和 处 理 这 些 事务 ， 需 要 抽象 地 描述 这 些 事务 的 特征 。 而 这 些 特征 正 是 
用 户 在 数据 库 中 所 存储 的 数据 。 数 据 是 描述 事务 的 符号 记录 。 描 述 事务 的 符号 可 以 是 数字 ,也 可 以 是 文 
字 、 图 形 、 图 像 、 声 音 、 语 言 等 。 

下 面 以 “学 生 信息 表 ” 为 例 ， 通 过 学 号 、 姓 名 、 性 别 、 年 龄 、 系 别 、 专 业 和 年 级 等 内 容 . 来 描述 学 
生 在 校 的 特征 : 

(08060126 王 海 平 ” 男 21 科学 与 技术 计算 机 教育 一 年 级 ) 

这 里 的 学 生 记 录 就 是 信息 。 在 数据 库 中 .记录 与 事物 的 属性 是 对 应 的 关系 。 可 以 将 数据 库 理解 为 存 
储 在 一 起 的 相互 有 联系 的 数据 集合 。 数 据 被 分 门 别 类 、 有 条 不 紊 地 保存 。 而 应 用 于 网 站 时 ， 则 需要 注意 
一 些 细则 问题 ， 即 这 些 特征 需要 用 字母 (英文 或 者 拼音 ) 来 表示 .避免 不 兼容 性 问题 的 发 生 。 


2.4.2 ”数据 库 


数据 库 (Database，DB) 是 “按照 数据 结构 来 组 织 、 存 储 和 管理 数据 的 仓库 “。 就 类 似 于 我 们 使 用 的 
Excel 电子 表格 一 样 , 可 以 将 诸多 数据 放置 在 不 同 的 单元 格 之 中 , 因而 将 这 些 能 够 存储 不 同 数 据 (如 文本 、 
数据 、 图 像 、 声 音 等 ) 类 型 的 表 ， 以 及 存储 所 有 表 的 库 称 为 “仓库 。 

在 经 济 管理 的 日 常 工作 中 .常常 需要 把 某 些 相关 的 数据 放 进 这样 的 “仓库 ， 并 根据 答 理 的 需要 进行 
相应 的 处 理 。 例 如 ， 企 业 或 事业 单位 的 人 事 部 门 常常 要 把 本 单位 职工 的 基本 情况 (职工 号 、 姓 名 、 年 龄 、 
性 别 、 籍 贯 、 工 资 等 ) 存 放 在 表 中 ,这 张 表 就 可 以 看 成 是 一 个 数据 库 。 


2.4.3 数据库 管 理 系 统 


数据 库 管理 系统 (Database Management System，DBMS) 是 一 种 操纵 和 管理 数据 库 的 大 型 软件 ， 用 
于 建立 、 使 用 和 维护 数据 库 。 它 对 数据 库 进 行 统一 的 管理 和 控制 ， 以 保证 数据 库 的 安全 性 和 完整 性 。 

用 户 通过 DBMS 访问 数据 库 中 的 数据 , 数据 库 管 理 员 也 通过 DBMS 进行 数据 库 的 维护 工作 。 它 提供 
多 种 功能 ， 详 细 介绍 如 下 。 
1. 数据 定义 功能 

DBMS 提供 数据 定义 语言 (Data Definition Language，DDL)， 用 户 通过 它 可 以 方便 地 对 数据 库 中 的 
数据 对 象 进行 定义 。 例 如 .在 Access 数据 表 中 ， 可 以 定义 数据 的 类 型 、 属 性 (如 字段 大 小 、 格 式 ) 等 。 
2. 数据 操纵 功能 

DBMS 还 提供 数据 操纵 语言 (Data Manipulation Language,，DML) ， 用 户 可 以 使 用 DML 操纵 数据 实 
现 对 数据 库 的 基本 操作 ， 如 查询 、 插 入 、 删 除 和 修改 等 。 例如， 在 User 表 中 ， 右 击 任意 记录 ,执行 【 删 
除 记录 】 命 令 ， 即 可 删除 数据 内 容 。 
3. 数据 库 的 运行 管理 

数据 库 在 建立 、 运 用 和 维护 时 ， 由 数据 库 管 理 系 统统 一 管理 、 统 一 控制 ， 以 保证 数据 的 安全 性 、 完 
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性 
4. 数据 库 的 建立 和 维护 功能 

它 包括 数据 库 初 始 数据 的 输入 、 转 换 功能 .数据 库 的 转 储 、 恢 复 功 能 .数据 库 的 管理 重组 织 功能 和 
性 能 监视 、 分 析 功 能 等 。 


2.4.4 ”关系 数据 库 


关系 数据 库 (Relational Database，RDB) 就 是 基于 关系 模型 的 数据 库 。 在 计算 机 中 ， 关系 数据 库 是 
数据 和 数据 库 对 象 的 集合 , 而 管理 关系 数据 库 的 计算 机 软件 称 为 关系 数据 库 管 理 系统 (Relational Database 
Management System，RDBMS ) 。 

1. 关系 数据 库 的 组 成 

关系 数据 库 是 由 数据 表 和 数据 表 之 间 的 关联 组 成 的 。 其 中 ,数据 表 通 常 是 一 个 由 行 和 列 组 成 的 二 维 
表 ， 每 一 个 数据 表 分 别 说 明 数 据 库 中 某 一 特定 的 方面 或 部 分 的 对 象 及 其 属性 。 数 据 表 中 的 行 通常 叫做 记 
录 或 元 组 ， 它 代表 众多 具有 相同 属性 的 对 象 中 的 一 个 ; 数据 库 表 中 的 列 通常 叫做 字段 或 属性 ， 它 代表 相 
应 数据 库 表 中 存储 对 象 的 共有 属性 。 

2. 关系 数据 库 基本 术语 

关系 数据 库 的 特点 在 于 它 将 每 个 具有 相同 属性 的 数据 独立 保存 在 一 个 表 中 。 对 任何 一 个 表 来 说 ， 用 
户 可 以 新 增 、 删 除 和 修改 表 中 的 数据 ， 而 不 会 影响 表 中 的 其 他 数据 。 下 面 来 了 解 一 下 关系 数据 库 中 的 一 
些 基 本 术语 。 

(1) 键 码 (Key) : 它 是 关系 模型 中 的 一 个 重要 概念 ， 在 关系 中 用 来 标识 行 的 一 列 或 多 列 。 

(2) 候选 关键 字 (Candidate Key) : 它 是 唯一 地 标识 表 中 一 行 而 又 不 含 多 余 属性 的 一 个 属性 集 。 

(3) 主 关键 字 (Primary Key) : 它 是 被 挑选 出 来 ， 作 为 表 行 的 唯一 标识 的 候选 关键 字 ， 一 个 表 中 只 
一 个 主 关键 字 ， 主 关键 字 又 称 为 主键 。 

(4) 公共 关键 字 (Common Key): 在 关系 数据 库 中 ， 关 系 之 间 的 联系 是 通过 相 容 或 相同 的 属性 或 属 
性 组 来 表示 的 。 如 果 两 个 关系 中 具有 相 容 或 相同 的 属性 或 属性 组 ， 那 么 这 个 属性 或 属性 组 被 称 为 这 两 个 
关系 的 公共 关键 字 。 

(5) 外 关键 字 (Foreign Key) : 如 果 公 共 关 键 字 在 一 个 关系 中 是 主 关 键 字 ， 那 么 这 个 公共 关键 字 被 称 
为 另 一 个 关系 的 外 关键 字 。 由 此 可 见 ， 外 关键 字 表 示 了 两 个 关系 之 间 的 联系 ,外 关键 字 又 称 作 外 刍 。 

3. 关系 数据 库 对 象 

数据 库 对 象 是 一 种 数据 库 组 件 ， 是 数据 库 的 主要 组 成 部 分 。 在 关系 数据 库 管理 系统 中 ， 常 见 的 数据 
库 对 象 包括 表 (Table) 、 索 引 (Index)、 视 图 (View)、 图 表 (Diagram) 、 默 认 值 (Default)、 规 则 (Rule) 、 
触发 器 (Trigger) 、 存 储 过 程 (Stored Procedure) 和 用 户 (User) 等 。 


EE | 常用 数据 库 及 数据 库 的 作用 


目前 . 很 多 企业 开始 重视 网 络 数 据 库 . 数据库 是 网 络 的 一 个 重要 应 用 .在 网 站 建设 中 发 挥 着 重要 的 
作用 。 网 络 数据 库 对 于 充分 利用 网 络 的 即时 性 、 互 动 性 起 着 重要 的 作用 。 在 网 站 中 数据 库 的 作用 主要 有 4 
个 方面 ， 即 收集 用 户 信息 、 网 站 搜索 功能 、 产 品 管理 、 新 闻 系统 。 
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2.5.1 ”收集 用 户 信息 


为 了 加 强 网 站 影响 力度 ， 往 往 需 要 将 访问 该 网 站 的 用 户 的 信息 收集 起 来 . 或 者 要 求 来 访 用 户 成 为 会 
员 ， 从 而 提供 更 多 的 服务 ， 如 购物 网 站 、 交 易 网 站 等 。 


- 注册 手机 邮箱 
通过 注册 页 面 ， 网 站 可 以 了 解 注册 用 户 的 一 些 个 人 信 
息 ， 如 图 2-10 所 示 。 * 地 件 地 址 | 建 


@|163.com 图 
除 此 之 外 , 还 有 一 些 网 站 想 了 解 用 户 对 所 使 用 的 产 We 
品 或 者 对 该 网 站 的 一 些 意见 , 通常 以 问卷 调查 方式 进行 《于 码 
收集 。 


2.5.2 ”网 站 搜索 功能 


网 站 的 站 内 搜索 功能 对 于 用 户 获取 网 站 信息 具有 “六 EB MEH 
非常 重要 的 作用 ,尤其 是 对 于 含有 大 量 信息 的 网 站 ， 如 人 
B2C 网 上 销售 网 站 或 者 含有 大 量 产品 信息 的 企业 网 站 emg 
等 。 站 内 搜索 不 仅 可 以 使 网 站 结构 清晰 ， 有 利于 需求 信 ET 
息 的 查找 ， 节 省 浏览 者 的 时 间 ， 也 是 吸引 顾客 、 达 成 网 
站 营销 目的 的 重要 手段 ， 如 图 2-11 所 示 。 


澳际 : 世界 名 校 新 排名 。 2013 世 界 大 学 排名 ”北大 千 人 私 可 PE 班 ”10 天 一 口 流 利 英语 ”二 年 硕 博 落户 京 沪 
人 金吉 列 12 万 学 子 的 选择 。 世界 名 校 排名 2013 。” 财富 智 闲 北大 班 $ 。 少儿 英语 全 面 提升 ”舌尖 上 的 甜美 新 害 


揭秘 : 2013 高 考 必 考 点 
留学 赠送 New ipad 
美国 高 中 春 招 启动 
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图 2-10 收集 用 户 信息 
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图 2-11 网 站 搜索 功能 


2.5.3 ”产品 管理 和 新 闻 系 统 


如 果 网 站 含有 大 量 的 产品 需要 展示 和 买卖 ， 则 通过 网 络 数据 库 可 以 方便 地 进行 分 类 ， 使 产品 更 有 条 
理 、 更 清晰 地 展示 给 客户 。 其 中 ,重要 的 是 需要 通过 数据 库 进行 存储 .合理 地 将 产品 信息 归 类 ， 从 而 方 
便 日 后 的 维护 和 检索 ， 如 图 2-12 所 示 。 

对 于 动态 网 站 而 言 ， 往 往 在 后 合 有 一 个 维护 系统 ， 目 的 是 将 技术 化 的 网 站 维护 工作 简单 化 。 通 过 后 
台 管 理 界面 ,管理 数据 库 中 的 信息 从 而 完成 产品 信息 的 管理 。 新 闻 网 站 系统 是 一 套 大 型 的 网 站 内 容 管理 
系统 。 在 站 内 的 一 般 新 闻 栏 目 中 .放置 行业 新 闻 或 相关 企业 新 闻 、 动 态 等 。 并 且 ， 新 闻 内 容 更 新 的 频率 
很 快 ， 所 以 需要 数据 库 不 断 地 添加 新 的 新 闻 内 容 。 
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2.5.4 网 站 中 的 常用 数据 


目前 ， 很 多 企业 开始 重视 网 络 数据 库 ， 网 络 数据 库 对 于 充分 利用 网 络 的 即时 性 、 互 动 性 起 着 重要 的 
作用 。 那 么 , 面 对 众 多 的 数据 库 , 使 用 哪些 数据 库 技术 更 合适 呢 ? 下 面 介绍 一 些 常 见 的 数据 库 及 其 特点 ， 
以 帮助 用 户 准确 地 为 网 站 选择 合适 的 数据 库 。 

1. Access 数据 库 技术 

Microsoft Access 是 第 一 个 在 Windows 环境 下 开发 的 一 种 全 新 的 关系 数据 库 管 理 系统 , 是 中 小 型 数据 
库 管理 的 最 佳 选择 之 一 ， 它 是 Office 家 族 的 组 件 之 一 。 

2. SQL Server 数据 库 技 术 

SQL Server 是 一 个 关系 数据 库 管 理 系 统 , 是 Microsoft 推出 的 新 一 代数 据 管理 与 分 析 软 件 , SQL Server 
是 一 个 全 面 的 、 集 成 的 、 端 到 端的 数据 解决 方案 ， 它 为 企业 中 的 用 户 提供 了 一 个 安全 、 可 靠 和 高 效 的 平 
合 ， 可 用 于 企业 数据 管理 和 商业 智能 应 用 。 目 前 微软 已 经 推出 了 SQL Server 2012 数据 库 。 

3. MySQL 数据 库 技术 

MySQL 是 一 个 小 型 关系 型 数据 库 管 理 系统 ， 开 发 者 为 瑞典 MySQL AB 公司 ,2008 年 1 月 16 号 被 
Sun 公司 收购 。 目 前 MySQL 被 广泛 地 应 用 在 Intemet 上 的 中 小 型 网 站 中 。 由 于 其 体积 小 、 速 度 快 、 总 体 
拥有 成 本 低 , 尤其 是 开放 源码 这 一 特点 , 许多 中 小 型 网 站 为 了 降低 网 站 总 体 拥有 成 本 而 选择 了 MySQL 作 
为 网 站 数据 库 。 

phpMyAdmin 是 用 PHP 编写 的 ， 可 以 通过 互联 网 控制 和 操作 MySQL。 通 过 phpMyAdmin 可 以 对 数 
据 库 进行 操作 ， 如 建立 、 复 制 、 删 除数 据 等 等 。 

4. Oracle 数据 库 技 术 

Oracle 是 目前 应 用 最 广泛 的 数据 库 系 统 。 一 个 完整 的 数据 库 系统 包括 系统 硬件 、 操 作 系统 、 网 络 层 、 
DBMS (数据 库 管理 系统 )、 应 用 程序 与 数据 ， 各 部 分 之 间 是 互相 依赖 的 ， 对 每 个 部 分 都 必须 进行 合理 的 
配置 、 设 计 和 优化 才能 实现 高 性 能 的 数据 库 系 统 。 


yi 调 Access 和 SQL Server 数据 库 


Access 数据 库 是 Microsoft 公司 于 1994 年 推出 的 微机 数据 库 管理 系统 .是 典型 的 新 一 代 桌 面 数据 库 
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管理 系统 。SQL Server 是 一 个 典型 的 关系 型 数据 库 管 理 系统 ， 目 前 已 应 用 在 银行 、 邮 电 、 铁 路 、 财 税 和 
制造 等 众多 行业 和 领域 。 通 过 对 Access 和 SQL Server 数据 库 的 学 习 ， 为 后 面 的 网 站 制作 打下 基础 。 


2.6.1 Access 数据 库 用 途 


Access 数据 库 的 用 途 非常 广泛 , 不 仅 可 以 作为 个 人 的 RDBMS (关系 数据 库 管理 系统 ) 来 使 用 , 而 且 
还 可 以 用 在 中 小 型 企业 和 大 型 公司 中 来 管理 大 型 的 数据 库 。 
1. 个 人 的 RDBMS 

Access 是 家 用 计算 机 中 管理 个 人 信息 的 出 色 工具 . 可 以 使 用 它 来 创建 一 个 包含 所 有 家 庭 成 员 的 姓名 、 
电子 邮件 、 爱 好 、 生 日 、 健 康 状况 等 信息 的 数据 库 。 
2. 小 型 企业 中 的 数据 库 

在 一 个 小 型 的 企业 或 者 学 校 中 . 可 以 使 用 Access 简单 而 又 强大 的 功能 来 管理 运行 业务 所 需要 的 数据 。 
3. 大 型 公司 中 的 数据 库 

Access 2010 在 公司 环境 下 的 重要 功能 之 一 就 是 能 够 链接 工作 站 、 数 据 库 服务 器 或 者 主机 上 的 各 种 数 
据 库 格式 。 
4. 大 型 数据 库 解析 

在 大 型 公司 中 ，Access 2010 特别 适合 创建 客户 /服务 器 应 用 程序 的 工作 站 部 分 。 


2.6.2 Access 2010 的 优点 


Access 2010 通过 改进 界面 和 无 需 很 深 的 数据 库 知识 的 交互 设计 功能 ， 帮 助 用 户 轻松 地 快速 跟踪 和 报 
告 信息 。 信 息 还 可 以 在 SharePoint Services 列表 上 通过 Web 共享 。 
1. 用 户 界 面 

Access 2010 通过 面向 结果 的 重新 设计 的 用 户 界面 、 新 导航 窗 格 和 带 有 选项 卡 的 窗口 视图 ， 为 用 户 提 
供 了 一 种 全 新 的 体验 。 即 使 没有 数据 库 经 验 ， 任何 用 户 都 可 以 开始 跟踪 信息 和 创建 报告 ， 做 出 更 加 有 根 
据 的 决策 。 
2. 直接 从 数据 源 收集 和 更 新 信息 

Access 2010 可 以 使 用 InfoPath 2010 或 HTML. 为 保持 表格 业务 规则 的 数据 库 收集 信息 . 创建 带 有 庶 
入 表单 的 电子 邮件 。 电 子 邮 件 回 复 将 植 入 并 更 新 Access 表格 ， 不 需要 重新 输入 任何 信息 。 
3. 创建 具有 相同 信息 的 不 同 视图 的 多 个 报告 

在 Access 2010 中 创建 报告 是 一 种 真正 的 “所 见 即 所 得 ”体验 。 可 以 修改 具有 实时 视觉 反馈 的 报告 
并 为 不 同 的 受众 保存 各 种 视图 。 新 的 分 组 窗 格 和 过 滤 与 分 类 功能 可 以 帮助 用 户 显示 信息 ， 以 便 做 出 更 加 
有 根据 的 决策 。 
4. 访问 和 使 用 多 个 数据 源 的 信息 

通过 Access 2010 可 以 将 表格 链接 到 其 他 Access 数据 库 、Excel 电子 表格 、SharePoint Server 站 点 、 
ODBC 数据 源 、SQL Server 数据 库 和 其 他 数据 源 。 然 后 ， 使 用 这 些 链接 的 表格 来 轻松 创建 报告 ， 从 而 在 
更 加 全 面 的 信息 集合 上 作 决 策 。 
5. 快速 创建 表格 

有 了 自动 数据 类 型 检测 ,在 Access 2010 中 创建 表格 与 使 用 Excel 表 格 一 样 轻松 .在 输入 信息 时 .Access 
2010 将 识别 这 些 信息 是 日 期 .货币 .还 是 任何 其 他 常见 数据 类 型 .甚至 可 以 将 整个 Excel 表格 粘贴 到 Access 
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2010 中 ,通过 数据 库 功能 跟踪 信息 。 
6. 拥有 针对 更 多 情景 的 新 字段 类 型 

Access 2010 可 以 采用 附件 和 多 重 数值 字段 等 新 字段 类 型 。 现 在 ， 可 以 将 任何 文档 、 图 像 或 电子 表格 
附加 到 应 用 程序 中 的 任何 记录 。 有 了 多 重 数值 字段 .就 可 以 在 每 个 单元 格 中 选择 多 个 值 (如 将 某 任务 分 
配给 多 个 人 ) 。 


2.6.3 SQL Server 发 展 历史 


SQL Server 起 源 于 Sybase SQL Server， 于 1988 年 推出 了 第 一 个 版 本 ， 这 个 版 本 主要 是 为 OS/2 平台 
设计 的 。Microsoft 公司 于 1992 年 将 SQL Server 移植 到 了 Windows NT 平台 

特别 是 Microsoft SQL Server 7.0 的 推出 ,这 个 版 本 在 数据 存储 和 数据 库 引 擎 方面 发 生 了 根本 性 变化 ， 
更 加 确立 了 SQL Server 在 数据 库 管 理工 具 中 的 主导 地 位 。 

Microsoft 公司 于 2000 年 发 布 了 SQL Server 2000, 该 版 本 继承 了 SQL Server 7.0 版 本 的 优点 , 同时 又 
增加 了 许多 更 先进 的 功能 ， 具 有 使 用 方便 、 可 伸缩 性 好 、 与 相关 软件 集成 程度 高 等 优点 ， 可 跨越 多 种 平 
合 使用。 

2005 年 , Microsoft 公司 发 布 了 Microsoft SQL Server 2005, 该 版 本 为 各 类 用 户 提供 了 完整 的 数据 库 解 
决 方案 ， 可 以 帮助 用 户 建立 自己 的 电子 商务 体系 ,增强 用 户 对 外 界 变 化 的 反应 能 力 ， 提 高 用 户 的 市 场 竞 
争 力 。 

最 新 的 SQL Server 2016 是 一 个 重大 的 产品 版 本 ， 它 推出 了 许多 新 的 特性 和 关键 的 改进 ， 提 供 了 更 安 
全 、 更 具 延 展 性 、 更 高 效 的 管理 能 力 ， 使 得 它 成 为 至 今 为 止 最 强大 和 最 全 面 的 SQL Server 版 本 。 其 主要 
功能 说 明 如 下 。 

1. 保护 数据 库 咨询 

SQL Server 2008 本 身 将 提供 对 整个 数据 库 、 数 据 表 与 Log 加 密 的 机 制 ， 并 且 存 取 加 密 数据 库 时 ， 完 
全 不 需要 修改 任何 程序 。 

2. 花费 更 少 的 时 间 在 服务 器 的 管理 操作 

SQL Server 2008 将 会 采用 一 种 Policy Based 管理 Framework, 来 取代 现 有 的 Script 管理 , 如 此 可 以 花 
费 更 少 的 时 间 来 进行 例 行 性 管理 与 操作 。 而 且 透 过 Policy Based 的 统一 政策 , 可 以 同时 管理 数 千 部 的 SQL 
Server， 以 达成 企业 的 一 致 性 管理 ， 而 不 必 对 每 一 台 SQL Server 设 定 新 的 组 态 或 管理 设 定 。 

3. 增加 应 用 程序 稳定 性 

SQL Server 2008 面 对 企业 关键 性 应 用 程序 时 , 将 会 提供 比 SQL Server 2005 更 高 的 稳定 性 , 并 简化 数 
据 库 失败 复原 的 工作 ， 甚 至 进一步 提供 加 入 额外 CPU 或 内 存 而 不 会 影响 应 用 程序 的 功能 。 

4. 系统 执行 效能 最 佳 化 与 预测 功能 

SQL Server 2008 将 会 继续 增强 数据 库 执行 效能 与 预测 功能 .不 但 将 进一步 强化 执行 效能 ， 并 且 加 入 
自动 收集 数据 可 执行 的 资料 ， 将 其 存储 在 一 个 中 央 资 料 的 容器 中 ， 而 系统 针对 这 些 容器 中 的 资料 提供 了 
现成 的 管理 报表 ， 可 以 生成 系统 现 有 执行 效能 与 先前 历史 效能 的 比较 报表 ,让 管理 者 进一步 做 管理 与 分 
析 决 策 。 


2.6.4 SQL Server 2008 体系 结构 


SQL Server 2008 应 用 在 微软 数据 平台 上 ， 使 得 公司 可 以 运行 最 关键 任务 的 应 用 程序 ， 同 时 降低 了 管 
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理 数据 基础 设施 和 发 送 观察 信息 给 所 有 用 户 的 成 本 。 

这 个 数据 平台 可 以 帮助 公司 满足 数据 爆炸 和 下 一 代数 据 驱动 应 用 程序 的 需求 。 下 面 简单 了 解 微软 数 
据 平 台 上 的 SQL Server 2008 如 何 满 足 这 些 数据 驱动 应 用 程序 的 需求 。 

1. 保护 用 户 信息 

SQL Server 2008 在 SQL Server 2005 的 基础 之 上 . 做 了 以 下 方面 的 增强 来 扩展 安全 性 以 保护 用 户 的 信 
息 。SQL Server 2008 可 以 对 整个 数据 库 、 数 据 文件 和 日 志文 件 进行 加 密 ， 而 不 需要 改动 应 用 程序 。 简 单 
的 数据 加 密 的 好 处 包括 使 用 任何 范围 或 模糊 查询 搜索 加 密 的 数据 、 加 强 数 据 安全 性 以 防止 未 授权 的 用 户 
访问 和 数据 加 密 。SQL Server 2008 通过 支持 第 三 方 密 钥 管理 和 硬件 安全 模块 产品 为 这 个 需求 提供 了 很 好 
的 支持 。 

SQL Server 2008 使 用 户 可 以 审查 自己 对 数据 的 操作 ， 从 而 提高 了 遵从 性 和 安全 性 。 审 查 不 只 包括 对 
数据 修改 的 所 有 信息 ， 还 包括 读 取 数据 的 时 间 信 息 。SQL Server 2008 具有 加 强 审查 的 配置 和 管理 功能 ， 
这 使 得 它 可 以 满足 各 种 规范 需求 。 

2. 确保 可 持续 性 

SQL Server 2008 使 公司 具有 简化 管理 和 提高 可 靠 性 的 应 用 能 力 ， 并 提供 了 更 可 靠 的 加 强 了 数据 库 镜 
像 的 平台 。SQL Server 2008 通过 请 求 获得 一 个 从 镜像 合作 机 器 上 得 到 的 出 错 页 面 的 重新 拷贝 ， 使 主要 的 
和 镜像 的 计算 机 可 以 透明 地 修复 数据 页 面 上 的 823 和 824 错误 。 

SQL Server 2008 压缩 了 输出 的 日 志 流 ， 以 便 使 数据 库 镜像 所 要 求 的 网 络 带 宽 达 到 最 小 。SQL Server 
2008 包括 了 新 增加 的 执行 计数 器 、 动 态 管理 视图 和 对 现 有 的 视图 的 扩展 ， 使 数据 库 功 能 更 加 强大 。 

3. 即 插 即 用 CPU 

为 了 即时 添加 内 存 资源 而 扩展 SQL Server 中 的 已 有 支持 . 即 插 即 用 CPU 使 数据 库 可 以 按 需 扩展 。 事 
实 上 ，CPU 资源 可 以 添加 到 SQL Server 2008 所 在 的 硬件 平台 上 而 不 需要 停止 应 用 程序 。 

4. 改进 的 安装 和 开发 过 程 

SQL Server 2008 对 SQL Server 的 服务 生命 周期 进行 了 显著 的 改进 ， 对 安装 、 建 立 和 配置 架构 进行 了 
重新 设计 。 这 些 改进 将 计算 机 上 的 各 个 安装 与 SQL Server 软件 的 配置 分 离开 来 ， 这 使 得 公司 和 软件 合作 
伙伴 可 以 提供 推荐 的 安装 配置 。 

SQL Server 2008 提供 了 集成 的 开发 环境 和 更 高 级 的 数据 提取 .使 开发 人 员 可 以 创建 下 一 代数 据 应 用 
程序 ， 同 时 简化 了 对 数据 的 访问 。SQL Server 2008 提供 了 一 个 可 扩展 的 商业 智能 基础 设施 ， 使 公司 可 以 
有 效 地 以 用 户 想 要 的 格式 和 地 址 发 送 相应 报表 。SQL Server 2008 可 以 通过 下 面 的 报表 改进 之 处 来 制作 、 
管理 和 使 用 报表 。 




















(1) 企业 报表 引擎 

有 了 简化 的 部 署 和 配置 ， 可 以 在 企业 内 部 更 简单 地 发 送 报表 .使 用 户 能 够 轻松 地 创建 和 共享 所 有 规 
模 和 复杂 度 的 报表 。 

(2) 新 的 报表 设计 器 


改进 的 报表 设计 器 可 以 创建 广泛 的 报表 .使 公司 可 以 满足 所 有 的 报表 需求 。 独 特 的 显示 能 力 使 报表 
可 以 被 设计 为 任何 结构 ， 同 时 增强 的 可 视 化 进一步 丰富 了 用 户 的 体验 。 

(3) 强大 的 可 视 化 

SQL Server 2008 扩展 了 报表 中 可 用 的 可 视 化 组 件 ， 可 视 化 工具 如 地 图 、 量 表 和 图 表 等 使 报表 更 加 友 
好 和 吻 懂 。 
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(4) Microsoft Office 演 染 

SQL Server 2008 提供 了 新 的 Microsoft Office 渲染 ,使 用 户 可 以 从 Word 里 直接 访问 报表 。 此 外 . 现 
有 的 Excel 泻 染 器 被 极 大 地 增强 , 用 以 支持 像 嵌 套数 据 区 域 、 子 报表 和 合并 单元 格 等 功能 。 这 使 用 户 可 以 
维护 显示 保 真 度 和 改进 Microsoft Office 应 用 中 所 创建 的 报表 的 全 面 可 用 性 。 

(5) Microsoft SharePoint 集成 

SQL Server 2008 报表 服务 将 Microsoft Office SharePoint Server 2007 和 Microsoft SharePoint Services 
深度 集成 ， 提 供 了 企业 报表 和 其 他 商业 信息 的 集中 发 送 和 管理 。 这 使 用 户 可 以 访问 包含 了 与 他 们 直接 在 
商业 门户 中 所 做 的 决策 相关 的 结构 化 和 非 结构 化 信息 的 报表 。 


2.6.5 了 解 ODBC 


ODBC(Open Database Connectivity， 开 放 数 据 库 互 连 ) 是 微软 公司 开放 服务 结构 (Windows Open 
Services Architecture，WOSA) 中 有 关 数 据 库 的 一 个 组 成 部 分 , 它 建立 了 一 组 规范 , 并 提供 了 一 组 对 数据 库 
访问 的 标准 API (应 用 程序 编程 接口 )。 这 些 API 利用 SQL 来 完成 其 大 部 分 任务 。ODBC 本 身 也 提供 了 
对 SQL 语言 的 支持 ， 用 户 可 以 直接 将 SQL 语句 送 给 ODBC。 








































































































一 个 基于 ODBC 的 应 用 程序 对 数据 库 的 操作 不 依赖 任何 DBMS (数据 库 管理 系统 ) , 不 直接 与 DBMS 
打交道 , 所 有 的 数据 库 操作 由 对 应 的 DBMS 的 ODBC 驱动 程序 完成 。 也 就 是 说 , 不 论 是 Access、MySQL 
还 是 Oracle 数据 库 ， 均 可 用 ODBC API 进行 访问 。 由 此 可 见 ，ODBC 的 最 大 优点 是 能 以 统一 的 方式 处 理 
所 有 的 数据 库 ， 如 图 2-13 所 示 。 

数据 源 名 
DSN) | 应 用 程序 应 用 屋 
二 人 
—| ODBC ODBC API 
管理 器 (SQL) 
ODBC 
驱动 程序 ODBC 屋 
E 
数据 源 
图 2-13 ODBC 





一 个 完整 的 ODBC 由 下 列 几 个 部 件 组 成 。 

应 用 程序 (Application): 为 了 完成 某 项 或 某 几 项 特定 任务 而 被 开发 运行 于 操作 系统 之 上 的 计算 机 
程序 。 

ODBC 管理 器 (Administrator): 主要 任务 是 管理 安装 的 ODBC 驱动 程序 和 数据 源 。 

驱动 程序 管理 器 (Driver Manager): 驱动 程序 管理 器 包含 在 ODBC32.DLL 中 . 对 用 户 是 透明 的 。 其 任 
务 是 管理 ODBC 驱动 程序 ， 是 ODBC 中 最 重要 的 部 件 。 

ODBC API: 一 套 复 杂 的 函数 集 ， 可 提供 一 些 通用 的 接口 ， 以 便 访 问 各 种 后 合 数据库。 
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ODBC 驱动 程序 : 一 些 DLL. 提供 了 ODBC 和 数据 库 之 间 的 接口 。 

数据 源 : 数据 源 包含 了 数据 库 位 置 和 数据 库 类 型 等 信息 ， 实 际 上 是 一 种 数据 连接 的 抽象 。 

应 用 程序 要 访问 一 个 数据 库 ， 首 先 必 须 用 ODBC 管理 器 注册 一 个 数据 源 ， 管 理 器 根据 数据 源 提供 的 
数据 库 位 置 、 数 据 库 类 型 及 ODBC 驱动 程序 等 信息 ,建立 起 ODBC 与 具体 数据 库 的 联系 。 这样， 只 要 应 
用 程序 将 数据 源 名 提供 给 ODBC，ODBC 就 能 建立 起 与 相应 数据 库 的 连接 。 

在 ODBC 中 . ODBC API 不 能 直接 访问 数据 库 ， 必 须 通过 驱动 程序 管理 器 与 数据 库 交 换 信 息 。 驱 动 
程序 管理 器 负责 将 应 用 程序 对 ODBC API 的 调用 传递 给 正确 的 驱动 程序 ， 而 驱动 程序 在 执行 完 相应 的 操 
作 后 ， 将 结果 通过 驱动 程序 管理 器 返回 给 应 用 程序 。 

在 访问 ODBC 数据 源 时 ,需要 ODBC 驱动 程序 的 支持 。ODBC 使 用 层次 的 方法 来 管理 数据 库 , 在 数 
据 库 通信 结构 的 每 一 层 ， 对 可 能 出 现 依赖 数据 库 产品 自身 特性 的 地 方 , ODBC 都 引入 一 个 公共 接口 以 解 
决 潜在 的 不 一 致 性 ， 从 而 很 好 地 解决 了 基于 数据 库 系统 应 用 程序 的 相对 独立 性 ， 这 也 是 ODBC 一 经 推出 
就 获得 巨大 成 功 的 重要 原因 之 一 。 



































Photoshop 是 一 款 非常 专业 的 图 像 制作 和 处 理 软件 ， 它 功能 强大 ， 集 成 了 图 像 扫 描 、 修 改 、 图 像 与 动 
画 制 作 、 输 入 与 输出 、Web 图 像 制作 等 多 种 功能 ， 是 一 款 深 受 大 众 喜爱 的 软件 ， 应 用 面 也 相当 广泛 ， 深 
受 各 公司 与 个 人 用 户 的 青睐 。 在 网 站 建设 过 程 中 Photoshop 主要 被 用 来 进行 网 页 制作 前 期 的 工作 ,包括 
处 理 网 页 所 使 用 的 各 种 图 像 ， 绘制 各 种 按钮 图标、 导航 条 和 内 容 栏 等 界面 元 素 。 

本 章 主要 介绍 网 页 界面 概述 、 选 择 选取 、 图 层 编辑 、 编 辑 文本 、 应 用 蒙 版 、 应 用 滤 镜 、 制 作 切片 以 
及 综合 实战 。 通 过 对 本 章 的 学 习 ， 我 们 可 以 设计 网 站 的 Logo、 网 页 的 布局 以 及 处 理 网 页 显示 需要 的 一 些 
基本 图 片 。 
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EE 加 网 页 界面 概述 


网 页 界面 设计 是 涵盖 计算 机 心理 学 、 设 计 艺术 学 、 认 知 科 学 和 人 机 工程 学 于 一 体 的 交叉 研究 领域 ， 
是 用 户 与 网 站 进行 交互 的 媒介 . 是 国际 计算 机 界 和 设计 界 最 活跃 的 研究 方向 。 本 节 主 要 讲述 两 方面 的 内 
容 ， 即 网 页 界面 设计 分 类 和 网 页 界面 设计 的 原则 。 用 户 通过 对 本 节 的 学 习 . 可 以 了 解 到 网 页 设计 可 以 分 
为 几 类 、 有 哪些 设计 原则 。 


3.1.1 网 页 界面 设计 分 类 


在 进行 网 页 界面 设计 时 ， 需 要 考察 界面 设计 需求 的 多 种 因素 ， 并 有 所 侧重 。 常 见 的 网 页 界面 设计 主 
要 可 分 为 三 类 .包括 功能 性 设计 、 情 感性 设计 和 环境 性 设计 。 
1. 功能 性 设计 

界面 效果 和 网 页 功能 并 非 对 立 的 事物 ， 而 是 一 个 整体 。 功 能 始终 是 网 页 的 核心 ， 而 界面 则 是 用 户 使 
用 功能 的 桥梁 。 过 于 追求 界面 效果 ， 内 容 空 洞 的 网 站 是 无 法 吸引 用 户 的 。 而 单纯 追求 功能 ， 不 注重 用 户 
体验 的 网 站 也 无 法 留 住 用 户 。 对 于 实用 性 的 网 站 而 言 ， 必 须 找寻 功能 和 界面 美观 的 平衡 点 。 
如 图 3-1 所 示 是 一 个 非常 成 功 的 在 线 共享 图 像 网 站 Flickr, 其 网 站 界面 设计 得 就 非常 有 特色 。 在 Flickr 
网 站 的 首页 ， 突 出 了 所 有 网 站 的 功能 ， 将 最 重要 的 网 站 搜索 、 共 享 、 上 传 、 编 辑 和 浏览 5 大 功能 放 在 显 
著 的 位 置 。 整 个 页 面 没有 多 余 的 部 分 ， 所 有 重要 的 功能 按钮 均 提供 了 字体 加 粗 或 对 比 强烈 的 颜色 ,非常 
简洁 且 实 用 。 
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Share your photos.™ 
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图 3-1 在 线 共享 图 像 网 站 Flickr 


2. 情感 性 设计 
在 营销 学 中 , 讲究 “ 欲 取 还 与 . 欲 退还 进 ”. 间接 地 使 用 户 接受 观点 往往 比 直接 强加 于 用 户 效果 更 好 。 














同 理 ,在 界面 设计 中 .使 界面 与 用 户 产生 情感 的 共鸣 ， 远 比 使 用 各 种 怪异 的 字体 、 花 俏 的 色彩 和 


有 作用 。 表 现 一 个 网 站 的 情感 的 手法 有 多 种 .包括 网 站 的 布局 方式 、 色 彩 的 搭配 、 字 体 的 选择 和 


处 理 等 。 








游戏 主题 的 阴暗 ， 传 递 了 强烈 的 颓废 和 负面 情感 。 


3. 环境 性 设计 
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如 图 3-2 所 示 是 游戏 暗黑 破坏 神 3 的 官方 网 站 , 整体 采用 了 暗色 调 . 配合 大 量 哥 特 式 的 装饰 , 体现 出 





SA 


图 3-2 游戏 暗黑 破坏 神 














任何 的 设计 都 要 与 环境 因素 相 联系 ， 处 于 外 界 环境 之 


环境 性 界面 设计 所 涵盖 的 因素 是 极为 广泛 的 .包括 政治 





界面 设计 正体 现 了 设计 艺术 的 社会 性 。 








色 与 图 形 设计 非常 具有 





























3 的 官方 网 站 


中 .设计 应 以 社会 群体 而 不 是 以 个 体 为 基础 。 


、 历 史 、 经 济 、 文 化 、 科 技 、 民 族 等 ， 这 方面 的 





如 图 3-3 所 示 是 故宫 博物 院 的 官方 网 站 , 其 使 用 红色 为 网 站 主 色调 . 导航 条 使 用 竖 排 的 隶书 字体 , 配 
h 国 古典 特色 。 


让 
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图 3-3 故宫 博物 院 的 官方 网 站 


图 像 设 计 软 件 Photoshop 





3.1.2 ”网 页 界面 设计 的 原则 


界面 设计 是 一 种 独特 的 艺术 。 在 进行 网 页 界面 设计 时 ， 需 要 遵循 以 下 原则 。 
1. 用 户 导向 原则 

设计 网 页 时 必须 以 用 户 导向 为 核心 ,了 解 网 页 面向 用 户 群 体 的 年 龄 、 性 格 特征 、 思 维 方式 等 。 例 如 ， 
面向 儿童 用 户 的 网 站 ,应 大 量 使 用 各 种 卡通 图 形 ， 而 面向 青年 的 网 站 ， 则 可 突出 时 尚 、 科 技 的 特色 。 
2. KISS 原则 

KISS 即 Keep It Simple and Stupid， 保 持 页 面 的 简洁 化 和 傻瓜 化 ， 易 于 操作 。 页 面 尽量 少 使 用 各 种 琐 
碎 的 图 片 ， 因 为 请 求 下 载 这 些 图 片 所 花费 的 时 间 要 比 下 载 一 整 张大 图 片 慢 得 多 。 操 作 设计 应 尽量 简单 ， 
所 有 内 容 和 服务 都 在 显著 的 地 方 巴 以 说 明 等 。 
3. Miller 原则 

心理 学 家 George A.Miller 的 研究 表明 ,一 个 人 一 次 所 接受 的 信息 量 为 (7+2) b。 这 一 原理 被 广泛 应 
用 于 网 页 设计 与 软件 开发 中 。 在 网 页 中 ， 同 级 别 的 栏目 数量 最 好 在 $ 一 9 个 之 间 。 如 果 链 接 超过 这 个 数量 
区 间 ， 用 户 心理 上 就 会 烦躁 、 压 抑 。 如 果 网 页 的 栏目 内 容 确实 很 多 ， 则 可 以 分 组 处 理 。 例 如 ， 每 隔 7 个 
栏目 ， 加 一 个 分 隔 线 或 换行 ,或 者 用 两 种 颜色 分 开 。 
4. 视觉 平衡 原则 

在 网 页 界面 中 ， 任 何 页 面 元 素 都 会 有 视觉 效果 ， 影响 页 面 的 视觉 平衡 。 例 如 ， 使 用 一 张大 的 图 片 ， 
往往 需要 更 多 的 文字 进行 平衡 ,使 页 面 看 起 来 不 至 于 偏 左 或 偏 右 。 信 息 密集 的 网 页 ， 需 要 注重 留 白 , 通 
过 留 白 给 用 户 创建 视觉 上 的 休息 区 ， 防 止 用 户 视觉 疲劳 。 
5. 阅读 性 原则 
为 方便 用 户 阅 读 页 面 的 文字 ， 可 参考 报纸 的 分 栏 方式 ， 使 页 面 的 可 阅读 性 提高 。 另 一 种 提高 阅读 性 
的 方式 是 选择 字体 。 网 页 的 内 容 文本 应 少 用 花 俏 的 字体 ， 尽 量 选 择 雅 黑 、 宋 体 、 隶 书 等 便于 识别 的 字体 。 
和谐 一 致 原则 
整个 网 站 的 各 种 元 素 (颜色 、 字 体 、 图 形 、 标 记 ) 应 使 用 统一 的 规格 ， 看 起 来 像 一 个 整体 。 同 一 级 
别 的 栏目 ， 文 字样 式 与 图 标 应 做 到 风格 一 致 ， 略 有 区 别 。 
. 个 性 化 原则 
互联 网 的 文化 是 一 种 休闲 的 平民 文化 。 为 网 页 创造 一 种 休闲 、 轻 松 愉 快 的 氛围 ， 可 以 使 网 页 更 加 吸 
引用 户 , 例如， 使 用 明快 的 颜色 和 卡通 化 的 字体 等 。 


节 罗 | 选择 选取 


在 Photoshop 中 可 以 任意 选取 需要 编辑 的 网 页 图 像 . 为 了 方便 用 户 选 取 要 处 理 的 范围 . 提供 了 不 同 的 
选取 工具 和 命令 。 本 节 主 要 讲解 矩形 选 框 工具 、 椭 圆 选 框 工 具 、 单 行 /单列 选 框 工具 、 套 索 工具 组 、 魔 棒 
工具 、 快 速 选 择 工 具 及 色彩 范围 。 通 过 对 本 节 的 学 习 ， 用户 可 以 更 加 方便 地 处 理 所 要 选取 的 部 分 图 像 。 


3.2.1 和 矩形 选 框 工具 


【和 拢 形 选 框 工具 】 改 台 是 Photoshop 中 最 常用 的 选择 工具 。 使 用 该 工具 在 画布 上 单 击 并 拖 动 鼠标 ,绘制 
一 个 矩形 区 域 . 杰 放 鼠 标 后 会 看 到 一 个 四 周 带 有 流动 虚线 的 区 域 。 
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[ 具 选 项 栏 中 包括 三 种 样式 ， 即 正常 、 固 定 比例 和 固定 大 小 。 在 【正常 】 样 式 下 ， 可 以 创建 任何 
尺 二 的 矩形 选区 ， 该 样式 也 是 【和 矩形 选 框 工 具 】 的 默认 样式 。 
选择 【 算 形 选 框 工具 】 国 .在 工具 选项 栏 中 选择 【样式 】 为 【固定 比例 】， 然后 可 以 设置 选区 高 度 与 














度 的 比例 ， 其 默认 值 为 1:1， 即 宽度 与 高 度 相同 .如 图 3-4 所 示 。 








图 3-4” 佐 形 选 框 工具 


如 果 选 择 【 样 式 】 为 【固定 大 小 】， 则 可 以 在 【宽度 】 和 【高 度 】 文 本 框 输入 所 要 创建 选区 的 尺寸 。 





在 画布 








单 


上 f 即 可 他 


建 固定 尺寸 的 矩形 选区 .这 对 选取 网 页 图 像 中 指定 大 小 的 区 域 非常 方便 。 


3.2.2 ”椭圆 选 框 工具 


如 果 想 要 选择 图 
工具 】 攻 相同 ， 不 同 的 是 在 工具 选项 栏 中 还 可 以 设置 【消除 锯齿 】 选 项 ， 该 选项 用 于 消除 曲线 边缘 的 马 
赛 克 效果 ， 如 图 3-5 所 示 。 








像 中 的 圆 形 区 域 ， 可 以 使 用 【椭圆 选 框 工具 】 虱 一 ， 其 创建 选区 的 方法 与 【矩形 选 杠 











图 3-5 梢 图 选 框 工具 
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3.2.3 ”单行 /单列 选 框 工具 


使 用 【工具 】 面 板 中 的 【单行 选 框 工具 】 攻 和 【单列 选 框 工具 】 国 I， 可 以 选择 一 行 像素 或 一 列 像素 。 
如 果 为 这 两 个 选区 填充 颜色 . 则 可 以 在 图 像 中 制作 一 像素 的 细 线 .如 图 3-6 所 示 。 








图 3-6 单行 /单列 选 框 工具 


3.2.4” 套 索 工具 组 


Photoshop 的 套 索 工具 组 包括 【 套 索 工具 】 图 、【 多 边 形 套 索 工具 】 国 和 【磁性 套 索 工具 】 鲍 |, 其 中 ， 
【 套 索 工具 】 国 | 也 称 为 曲线 套 索 ， 使 用 该 工具 可 以 在 图 像 中 创建 不 规则 的 选区 ， 如 图 3-7 所 示 。 














图 3-7 套 索 工具 


【多 边 形 套 索 工具 】 通 过 鼠标 的 连续 单 击 来 创建 多 边 形 选区 。 在 图 像 中 的 不 同位 置 单 击 形成 多 边 形 . 
当 指针 带 有 小 圆圈 形状 时 单 击 即 可 。 

当 背 景 与 主题 在 颜色 上 具有 较 大 的 反差 时 ,并 且 主 题 的 边缘 复杂 . 使 用 【磁性 套 索 工 具 】 可 以 方便 、 
准确 、 快 速 地 选择 主体 图 像 ， 只 要 在 主体 边缘 单 击 即 可 沿 其 边缘 自动 添加 节点 。 
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3.2.5 ” 魔 棒 工 具 


【 魔 棒 工 具 】 咒 是 根据 图 像 单 击 处 的 颜色 范围 来 创建 选区 的 。 也 就 是 说 ， 某 一 颜色 区 域 为 何 种 形状 ， 
就 会 创建 该 形状 的 选区 ， 如 图 3-8 所 示 。 




















图 3-8 魔 棒 工 具 


3.2.6 ”快速 选择 工具 


【快速 选择 工具 】 力 加 通过 可 调整 的 画笔 笔尖 快速 建立 选区 。 在 拖 动 鼠 标 时 ， 选 区 会 向 外 扩展 并 自动 
查找 和 跟踪 图 像 中 定义 的 边缘 。 选 择 【 快 速 选择 工具 】 国 I 后， 工具 选项 栏 中 显示 【新 选区 】 图 .、 【添加 
到 选区 】 图 和 【从 选区 中 减 去 】 图 。 当 启用 【新 选区 】 并 且 在 图 像 中 单 击 建立 选区 后 ， 此 选项 将 自动 更 
改 为 【添加 到 选区 】， 如 图 3-9 所 示 。 




















a 白 | 有 图 层 取 样 Es 





图 3-9 快速 选择 工具 








3.2.7 色彩 范围 








在 Photoshop 中 ,通过 【色彩 范围 】 命 令 也 可 以 创建 选区 ,该 命令 与 
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【 麻 棒 工具 】 类 似 ， 都 是 根据 颜 


色 范 围 来 创建 选区 。 执 行 【 选 择 】|【 色 彩 范 围 】 命 令 . 打开 【色彩 范围 】 对 话 框 ， 如 图 3-10 所 示 。 

















包围 
ee 
CO [也 | 一 
检测 人 应 (0) 癌 本 地 化 颜色 该 亿 ) 一、 
颜色 容 差 (E;: [0 ] [取消 ] 
一 一 A 
范围 (8); 和 [ 存储 (S).… 
国 4 2 
口 反 相 (D 


多 选择 范围 (E) ” 〇 图 像 (M) 
选区 预览 (了 ): | 无 $ 











图 3-10 色 


在 【色彩 范围 】 对 话 框 中， 使 用 【取样 颜色 】; 














使 用 【吸管 工具 】 在 图 像 窗口 中 单 击 选取 一 种 颜色 范围 . 单 击 【确定 】 按 钮 后 即 可 创建 该 颜 











选区 。 





彩 范 围 


选项 可 以 选取 图 像 中 的 任何 颜色 。 在 默认 情况 下 ， 


色 范围 的 








如 灿 图 层 编辑 


在 设计 网 页 图 像 时 ，Photoshop 提供 了 多 种 内 置 的 











图 层 样式 效果 ,便于 用 户 将 每 一 个 图 像 放置 在 单独 


的 图 层 中 , 这样 可 以 方便 后 期 的 修改 和 编辑 。 本 节 主 要 讲述 创建 与 设置 图 层 、 混 合 选项 、 投 影 和 内 阴影 














外 发 光 和 内 发 光 、 斜 面 和 浮雕 、 光 泽 、 颜 色 琶 加 、 渐 
以 使 设计 出 的 图 层 更 加 形象 生动 。 


3.3.1 创建 与 设置 图 层 

















变 生 加 、 图 案 友 加 和 描 边 。 通 过 对 本 节 的 学 习 ， 可 


新 建 图 层 可 以 方便 用 户 对 图 像 进 行 修改 。 在 【图 层 】 面 板 中 单 击 底部 的 【创建 新 图 层 】 按 馈 匡 .或 














者 按 Cttl+Shiftt+N 组 合 键 可 以 创建 一 个 空白 的 普通 图 层 ， 如 图 3-11 所 示 。 
Ctrl+Shift+N 组 合 键 ) 新 建 图 层 时 . 











通过 执行 【图 层 】| 【新 建 】| 【图 层 】 命 令 (或 按 


























建 图 层 】 对 话 框 中 可 以 设置 图 层 的 名 称 ， 以 及 图 层 的 显示 颜色 . 如 图 3-12 所 示 。 























在 弹出 的 【新 



















3.3.2 ”混合 选项 
混合 选项 用 来 控制 图 层 的 不 透明 度 


样式 】|【 混 合 选 
图 3-13 所 示 。 








54 














选项 】 命 令 ， 





由 











口 使 用 前 一 图 层 创建 前 贴 蒙 版 (p) 
:Ie $ 








| 正常 ?| 不 透明 度 (9): 
(正常 模式 不 存在 中 性 色 。) 








以 及 当前 图 层 与 其 他 | 








层 的 像素 





弹出 的 对 话 框 中 包含 两 组 混合 滑 块 . 即 “ 本 














口 将 内 部 效果 混合 成 组 外 
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J 通明 形状 图 层 中 
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口 拓 量 莹 版 抱 营 效果 (H) 
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混合 效果 。 执 行 【 





层 】| 【图 层 
层 ” 滑 块 ， 如 
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图 层 ”和 “下 一 











-一 二 
取消 ] 


新 建 样式 (0… 


J 预览 (Y) 








【本 图 层 】 滑 块 用 来 控制 当前 图 














3.3.3 ”投影 和 内 阴影 


层 上 将 要 混合 并 出 现在 最 终 图 
中 间 移 动 时 ， 当 前 图 层 中 的 所 有 比 该 滑 块 所 在 位 置 暗 的 像素 都 将 被 隐藏 ,被 隐藏 的 区 域 显示 为 透明 状态 。 





像 中 的 像素 范围 


:: 第 3 章 图 像 设计 软件 Photoshop 








。 将 左 侧 的 黑色 滑 块 向 


利用 投影 样式 可 以 逼真 地 模仿 出 物体 的 阴影 效果 ， 并且 可 以 对 阴影 的 颜色 、 大 小 、 清 晰 度 进行 控制 。 
在 【图 层 样式 】 对 话 框 中 ， 启 用 【投影 】 选 项 .调整 其 参数 即 可 ， 如 图 3-14 所 示 。 设 置 投 影 样式 前 后 的 





图 像 效 果 对 比 ， 如 图 3-15 所 示 。 
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图 3-14 投影 





(b) 


图 3-15 投影 效果 


内 阴影 作用 于 物体 内 部 ， 在 图 像 内 部 创建 出 阴影 效果 .使 图 像 出 现 类 似 内 陷 的 效果 。 





3.3.4 外 发 光 和 内 发 光 


通过 【外 发 光 】 选 项 可 以 制作 物体 光 晕 . 使 物体 产生 光源 效果 。 当 启用 【外 发 光 】 选 项 后 ,可 以 在 
其 右 侧 相对 应 的 选项 中 进行 各 参数 的 设置 。 在 设置 外 发 光 时 .背景 的 颜色 尽量 选择 深 色 图 像 ， 以 便 3 
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示 出 设置 的 发 光 效果 . 如 图 3-16 所 示 。 内 发 光 与 外 发 光 的 效果 刚好 相反 . 内 发 光 效 果 作 用 于 物体 的 内 部 。 












































































































































3.3.5 ”斜面 和 浮雕 
启用 【斜面 和 浮雕 】 选 项 可 以 为 





全 的 Ce 
机 模式 介 : [下 DE 
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Ca 语 
图 3-16 外 发 光 


样式 的 强 弱 、 大 小 和 明暗 变化 等 效果 ， 如 图 3-17 所 示 。 























































































































ARC: os jx 

















图 3-17 和 斜面 和 浮雕 


图 像 和 文字 制作 出 立体 效果 。 通 过 更 改 众 多 的 选项 ， 可 以 控制 浮雕 


























3.3.6 ”光泽 
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光泽 效果 可 以 使 物体 表面 产生 明暗 分 离 的 效果 ， 它 在 图 层 内 部 根据 图 像 的 形状 来 应 用 阴影 效果 ， 通 


过 【距离 】 的 设置 ， 可 以 控制 光泽 的 范围 ， 如 图 3-18 所 示 。 
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图 3-18 光泽 


3.3.7 ”颜色 从 加 





在 【颜色 登 加 】 选 项 中 ， 可 以 设置 【颜色 】、【 混 合 模式 】 以 及 【不 透明 度 】， 从 而 改变 二 加 色彩 的 效 





果 ， 如 图 3-19 所 示 。 











新 建 样式 (W)， 
回 预览 (0 




















图 3-19 颜色 和 登 加 
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3.3.8 渐变 又 加 


在 【渐变 到 加 】 选 项 中 可 以 改变 渐变 样式 以 及 角度 。 单 击 选项 组 中 间 的 渐变 条 .打开 【渐变 编辑 器 】 


对 话 框 ， 在 该 对 话 框 中 可 以 设置 出 不 同 颜色 混合 的 渐变 色 ， 为 图 像 添 加 更 为 丰富 的 渐变 夫 加 效果 ,如 图 





















































3-20 所 示 。 
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图 3-20 渐变 县 加 


3.3.9 ”图 案 友 加 

































































有 建 样式 (W).。 
回 戎 览 (0 








【图 案 倒 加】 选项 可 以 为 图 像 或 文字 添加 各 种 预 设 图 案 , 使 它们 的 视觉 效果 更 加 丰富 。 
右 端的 下 三 角 按钮 ， 可 以 从 弹出 的 对 话 框 中 选择 所 需 的 图 案 , 如 图 3-21 所 示 。 
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图 3-21 图 案 受 加 

















图 案 】 





:: 第 3 章 图 像 设 计 软件 Photoshop 








【图 案 】 选 项 指定 图 层 效果 的 图 案 。 单 击 弹出 式 面板 并 选取 一 种 图 案 。 单 击 【 新 建 样 式 】 按 钮 ， 可 以 
根据 当前 设置 创建 新 的 样式 图 案 。 单 击 【 贴 紧 原 点 】 按 钮 ， 可 以 使 图 案 的 原点 与 文档 的 原点 相同 ,或 将 
原点 放 在 图 层 的 左上 角 。 


3.3.10 ” 描 边 


启用 【 描 边 】 选 项 ， 在 其 右 侧 相对 应 的 选项 中 可 以 设置 描 边 的 大 小 、 位 置 、 混 合 模式 、 不 透明 度 和 
填充 类 型 等 。 在 【填充 类 型 】 下 拉 列 表 中 可 以 选择 不 同 的 填充 样式 ， 可 以 是 单 色 描 边 ， 也 可 以 是 图 案 或 
渐变 描 边 ， 如 图 3-22 所 示 。 
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图 3-22 描 边 





是 国 编辑 文本 


在 Photoshop 中 输入 文字 之 后 . 可 以 对 文字 进行 移动 复制、 变形 以 及 在 文字 与 段落 之 间 进 行 转 换 等 
操作 ， 使 其 产生 不 同 的 效果 。 本 节 主 要 讲述 创建 普通 文字 、 创 建 段 落 文本 、 设 置 文字 特征 和 更 改 文字 的 
外 观 。 通 过 对 本 节 的 学 习 ， 可 以 使 设计 出 的 字体 更 加 丰富 多 彩 ， 使 页 面 艺 术 效果 棚 棚 如 生 。 


3.4.1 创建 普通 文字 


Photoshop 中 包含 两 种 文字 工具 .它们 分 别 是 【 横 排 文字 工具 】 国 时 与 【 直 排 文字 工具 】 国 .运用 文 
字 工 具 在 图 像 中 输入 文字 后 ,Photoshop 将 自动 创建 一 个 新 的 图 层 ,此 时 的 新 图 层 缩 略 图 标 为 大 写字 显 
示 。 用 鼠标 双击 该 图 层 .或 者 单 击 画布 中 的 文字 ， 即 可 重新 编辑 图 层 中 的 文字 。 
1. 输入 横 排 文字 

选择 【工具 】 面 板 中 的 【 横 排 文字 工具 】 国 时 ， 在 画布 中 的 任意 位 置 单 击 ， 当 光标 显示 为 1. 文档 中 
出 现 闪烁 的 光标 ， 此 时 就 可 以 输入 文字 。 
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2. 输入 直 排 文字 


: 网 页 设计 与 网 站 建设 自学 经 典 





【 直 排 文字 工具 】 国 国 用 来 向 图 像 中 添加 竖 排 模式 的 文字 ， 其 使 用 方法 与 【 横 排 文字 工具 】 国 时 相同 。 


选择 【工具 】 面 板 中 的 【 直 排 文字 工具 】 轩 ， 在 画布 中 的 任意 位 置 单 


3.4.2 创建 段落 文本 








选择 【 横 排 文字 工具 】 国 后 .在 画布 中 单 击 的 同 ， 
当 文 档 出 现 流动 蚂蚁 线 时 释放 鼠标 ,在 流动 的 蚂蚁 线 选 框 中 输入 文字 | 





即 可 创建 段落 文本 ,如 图 3-23 所 示 。 














时 拖 动 鼠标 ， 


段落 文本 只 能 显示 在 定 界 框 内 ， 如 果 超 出 文本 的 范围 ， 定 界 框 : 


右 下 方 控制 柄 会 显示 为 田 字形 。 此 时 . 将 光标 放置 在 定 界 框 下 方 
的 控制 柄 上 , 同时 向 下 拖 动 鼠标 即 可 。 等 文字 完全 显示 后 . 定 界 框 右 


下 方 控制 柄 呈 口 字形 显示 。 
3.4.3 ”设置 文字 特征 








上 ， 并 输入 文字 。 
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处理 区 件 之 一 ， 业 田 像 操 笨 、 篱 牧 狂 改 、 田 
挤 制 作 、 广 告 创 蝎 ， 困 艰险 入 与 答 业 了 一 体 3 
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图 3-23 直 排 文字 工具 





选择 工具 箱 中 的 【文字 工具 】 国 由 后 .可 以 在 工具 选项 栏 中 设置 


文字 的 特征 ， 如 更 改 文字 方向 、 字 体 、 字 号 等 。 如 表 3-1 所 示 为 文字 了 
表 3-1 文字 工具 的 名 称 和 功能 


名 称 





功 能 


[ 具 的 名 称 和 功能 。 


更 改 文字 方向 | 在 文字 工具 选项 栏 中 ， 单 击 〖 更 改 文本 方向 】 按 包 国 ]， 可 以 在 文字 的 水 平 与 重 直 方向 之 间 切 换 


字体 
字号 
消除 锯 闪 

对 齐 方式 
颜色 

创建 文字 奕 形 
字符 /段落 


列举 了 各 种 类 型 的 字体 ， 用 户 可 以 根据 实际 情况 选择 字体 和 字形 
从 该 列表 中 可 以 选择 一 种 以 点 为 单位 的 字号 ， 或 者 输入 一 个 数值 
从 该 列表 中 可 以 选择 一 种 将 文字 混合 到 其 背景 中 的 方法 

可 以 左 对 齐 、 居 中 对 齐 或 右 对 齐 ， 使 文字 对 齐 到 插入 点 

单 击 选项 栏 中 的 颜色 块 ， 并 在 拾 色 器 中 为 文本 选择 一 种 填充 颜色 
可 以 把 文本 放 到 一 条 路 径 上 ， 扭 曲 文本 或 者 次 曲 文本 

单 击 轿 按钮 可 以 隐藏 或 显示 【字符 】 和 【段落 】 面 板 


使 用 【文字 工具 】 因 时 选择 要 更 改 的 段落 文本 . 单 击 工具 选项 栏 中 的 色 块 . 在 弹出 的 【选择 文本 颜色 】 





对 话 框 中 选择 所 需 的 文本 颜色 。 
3.4.4 ”更 改 文字 的 外 观 





文字 的 方向 决定 对 于 文档 或 者 定 界 框 的 方向 。 当 文字 图 层 垂直 时 ， 文 字 行 











在 【消除 锯齿 】 列 表 中 ， 可 以 选择 不 





选项 可 以 产生 一 种 较 柔 和 的 字符 。 


在 排版 过 程 中 ， 为 了 方便 对 文字 进行 编辑 ， 可 以 将 点 文本 转换 为 段落 文本 .执行 【图 











【转换 为 段落 文本 】 命 令 即 可 。 反 之 ， 可 以 将 段落 文本 转换 为 点 文本 ， 如 图 
使 用 【创建 文字 变形 】 辆 可 以 对 文字 进行 各 种 各 样 的 变形 。 选 择 【 文 字 了 





司 的 文字 效果 。 选 择 【 无 】 选 项 可 以 





上 下 排列 ; 





当 文 字 图 层 水 











平时 文字 行 左右 排列 。 更 改 文字 的 方向 只 需 单 击 工具 选项 栏 中 的 【更 改 文 本 方向 】 按 钮 国 即 可 。 


产生 一 种 锯齿 状 字符 ; 选 
择 【 锐 利 】 和 【犀利 】 选 项 可 以 产生 清晰 的 字符 ; 选择 【深厚 】 选 项 可 以 产生 厚重 的 字符 选择 【平滑 】 




















3-24 所 示 。 
[ 具 】 国 后 ， 单 击 工具 选项 


框 中 的 【创建 文字 变形 】 按 钮 辆 ,在 弹出 的 对 话 框 中 即 可 为 文字 选择 适当 的 变形 样式 。 








层 】| 【文字 ] | 


图 像 设计 软件 Photoshop 











Photoshop. 


图 3-24 转换 为 段落 文本 


了 Photoshop 中 的 蒙 版 包括 快速 莹 版、 剪贴 蒙 版 、 图 层 蒙 版 和 矢量 蒙 版 等 ， 可 以 控制 图 像 的 局 部 显示 和 
隐藏 . 是 合成 网 页 图 像 的 重要 途径 。 本 节 主 要 讲述 了 Photoshop 中 蒙 版 的 应 用 , 用 户 通过 对 内 容 知识 的 熟 
悉 掌 握 ， 可 以 更 加 得 心 应 手 地 处 理 图 片 。 


3.5.1 快速 蒙 版 


快速 蒙 版 主要 用 来 创建 、 编 辑 和 修改 选区 。 单 击 【 工 具 】 面 板 中 的 【以 快速 
蒙 版 模式 编辑 】 按 钮 国 ， 进 入 快速 蒙 版 ， 然 后 使 用 【画笔 工具 】 在 想 要 创建 选区 
的 区 域外 面 涂抹 。 再 次 单 击 【 工 具 】 面 板 中 的 【以 标准 模式 编辑 】 按 钮 国 ， 返 加 
正常 模式 ， 这 时 画笔 没有 绘制 到 的 区 域 形成 选区 ， 如 图 3-25 所 示 。 


3.5.2 ”剪贴 蒙 版 


剪贴 蒙 版 通过 下 面 图 层 中 图 像 的 形状 ， 来 控制 其 上 面 图 层 图 像 的 显示 区 域 。 图 3-25 ”快速 蒙 版 
在 下 面 的 图 层 中 需要 的 是 边缘 轮廓 ， 而 不 是 图 像 内 容 。 在 【图 层 】 面 板 中 选择 一 
个 图 层 . 执行 【图 层 】|【 创 建 剪贴 莹 版】 命令 ， 该 图 层 会 与 其 下 方 图 层 创建 剪贴 蒙 版 ， 如 图 3-26 所 示 。 












































































































































图 3-26 ”创建 剪贴 蒙 版 
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创建 剪贴 蒙 版 后 .发 现 蒙 版 下 方 图 层 的 名 称 带 有 下 画 线 ， 内 容 图 层 的 缩 览 图 是 缩 进 的 ， 并且 显 示 一 
个 剪贴 蒙 版 图 标 皇 ， 画 布 中 的 图 像 也 会 随 之 发 生变 化 。 创 建 剪 贴 蒙 版 后 ， 蒙 版 中 两 个 图 层 的 图 像 均 可 以 
随意 移动 。 如 果 是 移动 下 方 图 层 中 的 图 像 ， 那 么 会 在 不 同位 置 显示 上 方 图 层 中 的 不 同 区 域 图 像 ， 如 果 是 
移动 上 方 图 层 中 的 图 像 ， 那 么 会 在 同一 位 置 显示 该 图 层 中 的 不 同 区 域 图 像 ， 并 且 可 能 会 显示 出 下 方 图 层 
中 的 图 像 。 剪 贴 蒙 版 的 优势 就 是 形状 图 层 可 以 应 用 于 多 个 图 层 ， 只 要 将 其 他 图 层 拖 至 蒙 版 中 即 可 。 


3.5.3 图 层 蒙 版 


图 层 蒙 版 是 与 分 辩 率 相关 的 位 图 图 像 ， 它 用 来 显示 或 者 隐藏 图 层 的 部 分 内 容 ， 也 可 以 保护 图 像 的 区 
域 以 免 被 编辑 。 图 层 蒙 版 是 一 张 256 级 色 阶 的 灰 度 图 像 ， 蒙 版 中 的 纯 黑 色 区 域 可 以 遮 军 当前 图 层 中 的 图 
像 , 从 而 显示 出 下 方 图 层 中 的 内 容 ; 蒙 版 中 的 纯 白色 区 
域 可 以 显示 当前 图 层 中 的 图 像 : 蒙 版 中 的 灰色 区 域 会 根 
据 其 灰 度 值 呈现 出 不 同 层次 的 半 透明 效果 ， 如 图 3-27 
所 示 。 
在 【图 层 】 面 板 底部 有 一 个 【添加 图 层 蒙 版 】 按 钮 
计 |， 直 接 单 击 该 按钮 可 以 创建 一 个 白色 的 图 层 蒙 版 , 
相当 于 执行 【图 层 】|【 图 层 蒙 版 】| 【显示 全 部 】 命 令 ; 全 ~ 
结合 Alt 键 单 击 该 按钮 可 以 创建 一 个 黑色 的 图 层 蒙 版 . | Ts 
相当 于 执行 【图 层 】|【 图 层 蒙 版 】| 【隐藏 全 部 】 命 令 。 
创建 图 层 蒙 版 后 . 既 可 以 在 图 像 中 操作 . 也 可 以 在 蒙 版 图 3-27 图 层 繁 版 
中 操作 。 
以 白色 蒙 版 为 例 ， 蒙 版 缩 览 图 显示 一 个 矩形 框 ， 说 明 该 蒙 版 处 于 编辑 状态 ， 这 时 在 画布 中 绘制 黑色 
图 像 后. 绘制 的 区 域 将 图 像 隐藏 。 当 画布 中 存在 选区 时 . 单 击 【 图 层 】 底 部 的 【添加 图 层 蒙 版 】 按钮 吧 划 . 
会 直接 在 选区 中 填充 白色 显示 、 在 选区 外 填充 黑色 遮 军 ， 使 选区 外 的 图 像 隐藏 。 


3.5.4 ”矢量 蒙 版 


矢量 蒙 版 与 图 层 蒙 版 在 形式 上 比较 类 似 ， 然 而 矢量 蒙 版 并 非 以 图 像 控 制 蒙 版 区 域 ， 而 是 以 Photoshop 
中 的 矢量 路 径 来 控制 的 ， 因 此 与 分 辩 率 无 关 。 

创建 矢量 蒙 版 与 创建 图 层 蒙 版 的 方式 类 似 ， 都 可 以 通过 单 击 【图 层面 板 】 中 的 【添加 图 层 蒙 版 】 按 
钮 吧 到 | 来 实现 。 但 如 果 通 过 【 蒙 版 】 面 板 创建 矢量 蒙 版 ， 则 需要 单 击 【 选 择 矢量 蒙 版 】 按 钮 鸭 ， 除 了 可 
以 创建 空 矢量 蒙 版 后 ,还 可 以 在 有 路 径 的 前 提 下 创建 矢量 蒙 版 。 

再 选中 路 径 所 在 图 层 . 结合 Ctrl 键 单 击 【 图 层 】 底 部 的 【添加 图 层 蒙 版 】 按 钮 吗 台 来 实现 ， 或 者 执 
行 【 图 层 】|【 矢 量 蒙 版 】 |【 当 前 路 径 】 命 令 ， 创 建 带 有 路 径 的 矢量 蒙 版 。 


3.6 | 应 用 滤 镜 


模糊 滤 镜 、 高 斯 模糊 滤 镜 、USM 锐 化 滤 镜 、 镜 头 光量 滤 镜 和 添加 杂 色 滤 镜 是 网 页 设计 中 常用 的 几 种 
滤 镜 ， 可 以 自动 对 一 幅 图 像 添 加 各 种 效果 。 通 过 对 本 节 的 学 习 ， 用户 可 以 轻松 地 完成 很 多 图 像 的 特效 
大 大 简化 了 创建 复杂 效果 的 复杂 性 . 让 图 像 更 具 吸 引力 。 



















































































































































































3.6.1 模糊 滤 镜 


:::: 第 3 章 图像 设计 软件 Photoshop 





模糊 滤 镜 的 作用 是 使 选区 或 图 像 更 加 柔和 ，. 淡化 图 像 中 不 同色 彩 的 边界 ， 以 掩盖 图 像 的 缺陷 , 例如 . 


抠 取 图 像 造 成 的 锯齿 边缘 等 。 模 糊 滤 镜 的 效果 非常 轻微 ,而且 
没有 任何 选项 ， 适 用 于 对 图 像 进 行 简单 处 理 。 对 于 某 个 网 页 图 
像 而 言 ， 可 以 多 次 使 用 模糊 滤 镜 ， 以 进一步 增强 模糊 度 ， 如 图 
3-28 所 示 。 与 模糊 滤 镜 类 似 的 是 进一步 模糊 滤 镜 。 该 滤 镜 的 使 
用 方法 与 【模糊 】 滤 镜 相同 ， 但 强度 更 大 一 些 。 


3.6.2 ”高 斯 模糊 滤 镜 


高 斯 模糊 滤 镜 可 以 进行 不 同 程度 的 模糊 调节 ， 主 要 应 用 于 
精度 要 求 较 高 的 图 像 。 选 择 选区 或 图 层 后 ,执行 【 滤 镜 】|【 模 
糊 】|【 高 斯 模糊 】 命 令 后 ， 即 可 打开 【高 斯 模糊 】 对 话 框 。 

通过 【半径 】 下 方 的 滑 块 或 右 侧 的 输入 文本 域 都 可 以 调节 
高 斯 模糊 的 精度 ， 其 范围 为 0.1 一 230px， 如 图 3-29 所 示 。 


3.6.3 ”USM 锐 化 滤 镜 


锐 化 滤 镜 通过 增加 相 邻 像素 的 对 比 度 来 使 模糊 图 像 变 清 
晰 , 主要 用 于 修复 一 些 模糊 不 清 的 图 像 。USM 锐 化 滤 镜 所 提供 








图 3-28 ”模糊 滤 镜 


的 锐 化 功能 ， 不 管 它 是 否 发 现 了 图 像 边缘 ,都 可 以 使 图 像 边 缘 清晰 ,或 者 根据 指令 使 图 像 的 任意 一 部 分 
清晰 。 选 中 相应 的 选区 或 图 层 ， 然 后 执行 【 滤 镜 】|【 锐 化 】| 【USM 锐 化 】 命 令 ， 即 可 打开 【USM 锐 化 】 


对 话 框 ， 调 整数 据 ， 如 图 3-30 所 示 。 





图 3-29 ”高 斯 模糊 滤 镜 


【USM 锐 化】 对 话 框 中 包含 三 种 锐 化 强度 设置 。 





图 3-30 锐 化 滤 镜 


数量 : 该 属性 控制 总 体 锐 化 的 强度 ， 数 值 越 大 ， 则 图 像 边缘 锐 化 的 强度 越 大 。 
半径 : 该 属性 设置 图 像 轮 廊 被 锐 化 的 范围 ， 数 值 越 大 ， 在 锐 化 时 图 像 边 缘 的 细节 被 忽略 得 越 多 。 
阅 值 : 该 属性 控制 相 邻 的 像素 间 达 到 的 色 阶 差 值 限度 ,超过 该 限度 则 视 为 图 像 的 边缘 。 该 数值 越 高 


则 锐 化 过 程 中 忽略 的 像素 也 越 多 。 











网 页 设计 与 网 站 建设 自学 经 典 


3.6.4 ”镜头 光 晕 滤 镜 


在 制作 网 页 中 的 各 种 图 像 时 ,经 常会 需要 创造 各 种 相机 或 摄影 机 镜头 产生 的 光 旱 .此 时 可 使 用 
Photoshop CC 的 镜头 光量 滤 镜 。 选择 相应 的 图 层 或 选区 . 执 ph 劾 











行 【 滤 镜 】|【 泻 染 】|【 镜 头 光 旱 】 命 令 ， 即 可 打开 【镜头 
光 晕 】 对 话 框 进行 数据 设置 ， 如 图 3-31 所 示 。 


3.6.5 ”添加 杂 色 滤 镜 


杂 色 是 随机 分 布 的 彩色 像素 点 。 使 用 添加 杂 色 滤 镜 可 以 
在 图 像 中 增加 一 些 随机 的 像素 点 。 执 行 【 滤 镜 】|【 杂 色 ]】 | 
【添加 杂 色 】 命 令 , 打开 【添加 杂 色 】 对 话 框 。 默 认 情 况 下 . 
在 【平均 分 布 】 中 添加 【数量 】 为 “12.5% 。 图 3-31 镜头 光学 滤 镜 


时 制作 切片 


在 Photoshop 中 可 以 进行 切片 的 制作 . 存储 和 输出 .【 切 片 工 具 ] 图 和 【切片 选择 工具 ] 国 是 Photoshop 
中 提供 的 两 种 制作 网 页 切片 的 工具 。 本 节 主 要 讲述 切片 工具 、 切 片 选择 工具 、 存 储 为 Web 所 用 格式 、 输 
出 设置 。 通 过 对 本 节 的 学 习 ， 可 以 制作 出 网 站 设计 所 需 的 切片 。 


3.7.1 切片 工具 


【切片 工具 】 加 是 最 基本 的 绘制 切片 的 工具 . 其 提供 了 4 种 绘制 切片 的 方式 。 在 工具 箱 中 选中 【切片 
工具 】 攻 后 ， 即 可 在 工具 选项 栏 中 选择 绘制 切片 的 三 种 样式 。 
正常 : 该 样式 允许 用 户 使 用 光标 绘制 任意 大 小 的 切片 。 
固定 长 宽 比 :该 样式 允许 用 户 在 右 侧 的 【宽度 】 和 【高 度 】 等 输入 文本 域 中 输入 指定 的 大 小 比例 ， 
然后 再 通过 【切片 工具 】 攻 根据 该 比例 绘制 切片 。 
固定 大 小 : 该 样式 允许 用 户 在 右 侧 的 【宽度 】 和 【高 度 】〗 等 输入 文本 域 中 输入 指定 的 大 小 ， 然 后 通 
过 【切片 工具 】 攻 根据 该 大 小 绘制 切片 。 

除了 以 上 三 种 样式 外 ,【 切 片 工 具 】 加 的 工具 选项 栏 还 有 【基于 参考 线 的 切片 】 按 钮 。 如 果 图 像 包 含 
参考 线 ， 则 单 击 该 按钮 后 ，Photoshop 会 根据 参考 线 绘制 切片 。 


3.7.2 切片 选择 工具 


除了 【切片 工具 】 辆 外，Photoshop 还 提供 了 【切片 选择 工具 】 国 .人 允许 用 户 选 中 切片 ， 然 后 对 切 
片 进行 编辑 。 在 工具 箱 中 选择 【切片 选择 工具 】 国 后 . 即 可 单 击 图 像 中 已 存在 的 切片 ， 通 过 右键 快捷 菜 
单 进行 编辑 。 编 辑 切片 的 命令 共有 以 下 9 条 。 

删除 切片 : 执行 该 命令 可 将 选中 的 切片 删除 。 

编辑 切片 选项 : 执行 该 命令 将 打开 【切片 选项 】 对 话 框 ， 该 对 话 框 允许 用 户 设置 切片 类 型 、 切 片 名 
称 、 链 接 的 URL、 目 标 打开 方式 、 信 息 文 本 、 图 片 置 换文 本 、 切 片 的 大 小 、 坐 标 位 置 以 及 背景 颜色 等 




































































第 3 章 图 像 设 计 软 件 Photoshop 





提升 到 用 户 切 片 : 将 非 切 片区 域 转换 为 切片 。 

组 合 切 片 : 将 两 个 或 更 多 的 切片 组 合 为 一 个 切片 。 

划分 切片 : 执行 该 命令 将 打开 【划分 切片 】 对 话 框 ,将 一 个 独立 的 切片 划分 为 多 个 切片 。 划 分 切片 
时 ， 既 可 以 水 平方 式 划分 ， 又 可 以 垂直 方式 划分 。 

置 为 顶层 ， 当 多 个 切片 重 又 时 ， 将 某 个 切片 设置 在 切片 最 上 方 。 

前 移 一 层 ， 当 多 个 切片 重 又 时 ， 将 某 个 切片 的 层 却 顺序 提高 1 层 。 

后 移 一 层 : 当 多 个 切片 重奏 时 ， 将 某 个 切片 的 层 玛 顺序 降低 1 层 。 

置 为 底层 : 当 多 个 切片 重 毒 时， 设置 某 个 切片 在 最 底层 。 

制作 切片 的 最 终 目 的 是 将 图 像 切片 导出 为 网 页 .在 Photoshop 中 ,按照 指定 的 步骤 即 可 导出 切片 网 页 。 


3.7.3 ”存储 为 Web 所 用 格式 


执行 【文件 】 |【 导 出 】|【 存 储 为 Web 所 用 格式 】 命 令 ， 打开 【存储 为 Web 所 用 格式 】 对 话 框 ， 如 
图 3-32 所 示 ， 可 以 选择 优化 选项 以 及 预览 优化 的 图 稿 。 















































图 3-32 【存储 为 Web 所 用 格式 】 对 话 杠 











【存储 为 Web 所 用 格式 】 对 话 框 的 左 侧 是 预览 图 像 窗口 . 包含 4 个 选项 卡 . 它们 的 功能 如 表 3-2 所 示 . 
而 位 于 右 侧 的 是 用 于 设置 切片 图 像 仿 色 的 选项 。 


表 3-2 选项 卡 的 名 称 和 功能 























原稿 单 击 该 选项 卡 ， 可 以 显示 没有 优化 的 图 像 

优化 单 击 该 选项 卡 ， 可 以 显示 应 用 了 当前 优化 设置 的 图 像 
双 联 单 击 该 选项 卡 ， 可 以 并 排 显 示 图 像 的 两 个 版 本 

四 联 单 击 该 选项 卡 ， 可 以 半 掩 显示 图 像 的 四 个 版 本 








页 设计 与 网 站 建设 自学 经 典 : 


网 与 网 站 建设 自学 经 典 





3.7.4 输出 设置 


在 设置 图 像 的 优化 属性 后 . 单 击 对 话 框 右上 角 的 【优化 菜单 】 按 钮 ， 在 弹出 的 菜单 中 执行 【编辑 输 
出 设置 】 命 令 ， 即 可 打开 【输出 设置 】 对 话 框 。 在 该 对 话 框 的 【设置 】 下 拉 列 表 中 ， 可 进行 4 项 设置 。 

切片 

【切片 】 选 项 的 作用 是 设置 输出 切片 的 属性 , 包括 设置 切片 代码 以 表格 的 形式 存在 还 是 以 层 的 形式 存 
在 。 另 外 ， 该 对 话 框 还 提供 了 为 切片 命名 的 选项 ， 人 允许 设置 切片 的 命名 方式 。 选 择 以 表格 的 方式 创建 切 
片 ， 则 可 以 设置 3 种 表格 属性 。 

HIML 

HTML 选项 用 于 创建 满足 XHTML 导出 标准 的 Web 页 。 如 果 启用 【输出 XHTML】 复 选 框 ， 则 会 禁 
用 可 以 与 此 标准 冲突 的 其 他 输出 选项 ， 并 自动 设置 【标签 大 小 写 】 和 【属性 大 小 写 】 选 项 。 

背景 

【背景 】 选 项 的 作用 是 为 整个 页 面 提供 一 张 整 体 的 背景 图 像 ， 或 为 页 面 设置 背景 颜色 。 选 择 【颜色 】 
列表 ， 可 以 设置 背景 为 无 色 、 杂 边 、 吸 管 颜色 、 和 白色 、 黑 色 以 及 其 他 颜色 。 

存储 文件 

【存储 文件 】 选 项 的 作用 是 定义 保存 的 切片 图 片 属性 ,包括 为 图 片 文件 命名 、 设 置 图 片 文 件 名 的 兼容 
性 (字符 集 ) 以 及 设置 图 片 保存 的 路 径 和 存储 的 方式 等 。 

【文件 名 兼容 性 】 的 作用 是 规定 命名 的 文件 名 包括 哪些 字符 。 其 中 ，Windows 允许 长 文件 名 , Mac OS 
9 则 使 用 utf-8-mac 的 文件 名 编码 方式 ，UNIX 的 文件 名 区 分 大 小 写 。 

【将 图 像 放 进 文件 夹 】 选 项 可 以 设 定 保存 图 像 的 子 目录 名 称 ， 通 常 网 站 会 使 用 images。 

【存储 时 拷贝 背景 图 像 】 选 项 可 为 切片 图 像 保 留 在 【背景 】 设 置 中 定义 的 图 像 背景 。 
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本 章 概要 性 地 介绍 了 图 像 设 计 软件 Photoshop 的 一 些 常用 工具 . 为 本 书后 续 的 学 习 打 下 一 个 坚实 的 基 
础 。 本 章 从 网 页 界面 概述 开始 ， 讲 述 了 选择 选取 、 图 层 、 文 本 、 蒙 版 、 滤 镜 和 切片 工具 的 基本 用 法 ， 制 
作 吸 引 人 的 网 页 的 一 些 方法 和 相关 技术 ， 接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进 行 实践 。 


3.8.1 实战 : 设计 网 站 进入 页 界面 


网 站 的 进入 页 是 进入 网 站 之 前 过 渡 的 页 面 ， 是 给 网 站 访问 者 留 下 第 一 印象 的 网 页 。 设 计 成 功 的 进入 

页 可 以 为 浏览 者 留 下 一 个 深刻 而 美好 的 印象 ， 促 使 浏览 者 继续 浏览 提高 浏览 者 对 网 站 的 兴趣 。 本 
机 交 生 有 Ponhip 全 证 并 全 作 不 辣 浊 的 过 天天， 主要 半 二 和 志 线 的 此 所 Kg 人 工具] 症 有 入 1 这 雍 
工具 】 国 的 应 用 ， 如 图 3-33 所 示 。 
STEP|01 绘制 并 复制 三 角形 。 执 行 【图 像 】| 【画布 大 小 】 命 令 . 打开 【画布 大 小 】 对 话 框 . 设置 【高 度 】 
为 “550 像素 "、 【画布 扩展 颜色 】 为 “黑色 .选择 【多 边 形 工具 】 | 并 在 工具 选项 栏 中 选择 【 像 
素 】. 设置 前 景色 为 “棕色 (#884606)”.【 边 】 为 “3”。 新 建 “ 图 层 1”. 在 画布 中 绘制 一 个 三 角形 . 复制 
“图 层 1” 图 层 ， 自动 命名 图 层 为 “图 层 1 拷贝 ”图 层 . 如 图 3-34 所 示 。 
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这 你 去 进 大 自 饼 ， 让 你 效 妥 理 价 宁 衣 为 关 丽 ， 
给 你 , 萎 - 般 约 症 和 1 





图 3-33 大 自然 户外 游 网 站 进入 页 界面 





图 3-34 绘制 并 复制 三 角形 





STEP|02 输入 文字 。 选择 【移动 工具 】 国 . 按 Ctrl 键 并 单 击 “ 图 层 1 拷贝 ”图 层 . 创建 该 图 层 的 选区 
然后 ,使 用 【油漆 桶 工具 】 攻 填充 颜色 为 “黑色 (#000000)“。 并 按 CtrltD 组 合 键 取消 选区 。 使 用 【 横 
排 文 字 工 具 】 攻 在 画布 左上 角 输 入 “大 自然 户外 游 ” 并 执行 【窗口 】| 【字符 】 命 令 ， 在 弹出 的 【字符 】 


面板 中 设置 参数 。 使 用 相同 的 方法 ,分 别 在 画布 中 间 和 下 方 输入 广告 和 版 权 等 文本 ， 如 图 3-35 所 示 。 












































音 认 在 进 大白 蕉 ， 认 窗 击 大理 份 于吉 为 关 丽 、 
大 自然 户外 诸 [人 





图 3-35 输入 文字 








一 





STEP|03 添加 素材 。 分 别 将 素材 “边框 png” 和 “墨迹 按钮 png” 拖 动 至 该 文档 。 选 择 【 横 排 文 字 工具 】 


四 





在 墨迹 按钮 上 输入 “进入 ”并 在 工具 选项 栏 中 选择 合适 的 【字体 】、 【字体 大 小 】 和 【颜色 】。 然 后 . 




















在 【图 层 】 面 板 中 复制 边框 ,使 用 【移动 工具 】 攻 移动 2 个 边框 的 位 置 . 如 图 3-36 所 示 。 


事 你 生 泪 大 各 集 ， 让 你 疱 妆 理 份 守 吉 与 关 丽 ， 
华 你 七- 椒 的 二 从 1 





图 3-36 添加 素材 




















STEP|04 创建 切片 。 在 【图 层 】 面 板 中 ， 同 时 选择 版 权 、 墨 迹 按钮 .“ 进 入 ”和 背景 图 层 ， 并 在 工具 选 
项 栏 中 单 击 【 水 平 居中 对 齐 】 按 钮 医 国 ， 相 对 居中 对 齐 。 按 CtrltR 组 合 键 显示 标尺 。 拖 动 参考 线 ， 然 后 ， 


选择 【切片 工具 】 用 缠 ， 单 击 【 基 于 参考 线 的 切片 】 按 钮 ， 基 于 参考 线 创建 5 个 切片 。 设 置 切片 。 右 击 第 











1 个 切片 ,执行 【划分 切片 】 命 令 ， 在 弹出 的 【划分 切片 〗】 对 话 框 中 ,设置 【垂直 划分 】 为 2 个 横向 切片 
均匀 分 隔 。 然 后 双击 第 1 个 切片 ， 在 弹出 的 【切片 选项 】 对 话 框 中 设置 指定 切片 的 【宽度 】 为 “234 ， 





如 图 

















3-37 所 示 。 


达 你 亦 进 大 眉 饼 ， 让 你 郊 受 理 从 宁 讲 义 关 丽 ， 
君 你 ,人世 一 相约 感 兴 1 





图 3-37 创建 切片 


STEP|05 执行 【文件 】 |【 导 出 】|【 存 储 为 Web 和 设备 所 用 格式 】 命 令 . 在 【存储 为 Web 和 设备 所 用 格 
式 (100%)】 对 话 框 中 分 别 设置 各 个 切片 【优化 的 文件 格式 】 为 “gif 。 单 击 【存储 】 按 钮 。 在 【将 优化 
结果 存储 为 】 对 话 框 中 设置 【保存 类 型 】 为 “HIML 和 图 像 (*html) 。 


3.8.2 ”实战 : 设计 化 妆 品 广告 网 幅 


随 着 互联 网 的 善 及 .网 络 广告 正 处 于 蓬勃 发 展 之 中 .网 幅 广告 (Banner) 是 目前 最 常见 的 广告 形式 

















3 章 图 像 设 计 软件 Photoshop 





之 一 。 一 个 好 的 Banner 往往 会 吸引 更 多 的 访问 者 ， 以 及 增加 网 站 的 知名 度 。 本 例 将 使 用 Photoshop 设计 
化 妆 品 广告 网 幅 ， 主 要 练习 用 【 甜 形 工具 】 国 、[ 渐 交工 具 】 国 、[【 横 排 文 字 工 具 】 世 及 图 层 样式 制作 
一 个 化 妆 品 广告 ， 如 图 3-38 所 示 。 

Wi 3 
从 -用 " es 水 润 娇 颜 
oo x 


图 3-38 ”化妆 品 广告 网 幅 



































STEP|01 新 建文 档 填充 颜色 。 新 建 空白 文档 .设置 画布 的 【尺寸 】 为 950pxx120px、【 分 辨 率 】 为 “72 
像素 /英寸 “， 选择 【和 矩 形 工具 】 国 .在 画布 中 绘制 一 个 矩 形 。 然 后 ,选择 【渐变 工具 】 国 I 为 和 矩 形 填充 粉 
红色 渐变 ， 如 图 3-39 所 示 。 








图 3-39 新 建文 档 填充 颜色 


STEP|02 对 素材 进行 编辑 。 将 素材 拖 动 至 Banner 文档 中 ， 使 用 【移动 工具 】 国 I 移动 图 像 至 指定 位 置 。 
选择 “水 图 层 "， 执行 【编辑 】|【 自 由 变换 】 命 令 ， 选 择 右 下 方 的 控制 点 并 开始 拖 动 ， 直 至 与 图 层 一 样 大 
小 。 然 后 按照 相同 的 方法 ， 对 “水 滴 图 层 "， 进 行 旋转 操作 ， 如 图 3-40 所 示 。 
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图 3-40 对 素材 进行 编辑 











STEPI03 输入 文本 “M” 和 “ 美 迪 凯 "。 单 击 【 横 排 文 字 工 具 】 国 |， 在 图 像 左 侧 输入 文本 “M” 和 “ 美 
迪 凯 ”， 然 后 执行 【窗口 】| 【字符 】 命 令 , 打开 【字符 】 面 板 . 设置 【字体 大 小 】 和 【字体 间距 】 等 参数 ， 
如 图 3-41 所 示 。 
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图 3-41 输入 文本 “M” 和 “ 美 迪 凯 ” 








STEP|04 为 文本 “M” 和 “ 美 迪 凯 ” 添 加 效果 。 在 【图 层 】 面 板 中 双击 M 文字 图 层 . 打开 【图 层 样式 ] 
对 话 框 。 然 后 ,启用 投影 、 外 发 光 、 内 发 光 、 渐 变 埃 加 、 描 边 选项 添加 效果 . 使 用 相同 的 方法 为 “ 美 迪 

















oo. 


: 网 页 设计 与 网 站 建设 自学 经 典 :::: 


。 
汉典 





凯 ” 设 置 与 文本 “M” 相 同 的 参数 .如 图 3-42 所 示 。 



































新生 加 
新 交 
梁 人 模式 (0 [党 ] 
T(E 一 
A: | 
UL 的 | 
A (| JE ] 度 [gas] A [Ea] 3 
oo ]% 天 OBPD © wk() (Qk [Ra | 
| WC oo— 6]% IRE CG 0 |% 
ee | es | Kh: Tr [7 | 大 NS sk 
投影 者 边 
辕 构 后 攀 
汉人 式 nj [EN my a 
0 一 加 ]% te 
纲 S 模 式 E: | 正 生 让 
多 限 人 (加 ] 度 回合 用 全 蝎 光 GERROk 一 TD 1v EE 
WO: 0 [人 La 
Ro | ]% ME | We; 
大 NS Tb] 人 6 sme: 到 *|dezcs6 | 








图 3-42 为 文本 “M” 和 “ 美 迪 凯 ” 添 加 效果 





STEP|05 输入 文字 并 设置 参数 。 在 图 像 右 侧 输入 文本 “水 润 娇 颜 ， 水 澜 盈 润 "， 打 开 【 字 符 】 面 板 , 分 
别 设置 文本 大 小 、 颜 色 、 消 除 锯齿 。 其 中 . 文本 “水 润 ” 和 “水 澜 ”设置 相同 ,文本 “ 娇 颜 ” 和 “和 盈 润 
设置 相同 ， 如 图 3-43 所 示 。 








水 润 娇 颜 
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图 3-43 输入 文字 并 设置 参数 





Flash 是 用 于 动画 制作 和 多 媒体 创作 及 交互 式 设计 网 站 的 强大 的 项 级 创作 平台 。 在 网 站 的 开发 中 , 各 
种 网 站 的 进入 动画 、 导 航 条 、 图 像 轮换 动画 、 按 钮 动画 等 都 可 使 用 Flash 制作 。Flash 可 以 将 音乐 声效、 
动画 及 富有 新 意 的 界面 融合 在 一 起 ， 通 过 提供 高 品质 的 声音 和 动画 的 效果 来 提升 网 页 的 吸引 力 。Flash 创 
建 的 动画 在 输出 为 网 页 可 用 的 格式 后 ,将 产生 一 个 扩展 名 为 .swf 的 文件 ， 当 将 swf 文件 嵌入 到 网 页 中 时 ， 
目前 大 多 数 浏览 器 都 能 够 正常 播放 。 

本 章 主要 讲述 导入 动画 素材 、 管 理 库 资源 、 绘 制 动 画图 形 、 处 理 动画 文本 、 网 页 动画 类 型 、Flash 渡 
镜 效果 和 综合 实战 。 通 过 对 本 章 的 学 习 ， 可 以 制作 出 网 站 建设 过 程 中 所 需要 的 网 页 动画 效果 。 














导入 动画 素材 








Flash 不 仅 可 以 使 用 绘图 工具 创建 各 种 图 形 和 文本 .还 能 将 其 他 软件 创建 的 矢量 图 形 和 位 图 图 像 等 素 
材 导 入 文档 中 。 本 节 主 要 包括 三 方面 的 内 容 . 即 导 入 到 和 舞台、 导入 到 库 、 打 开外 部 库 。 用 户 通过 对 本 节 
的 学 习 ， 了解 导入 动画 素材 的 方法 . 方便 在 Flash 软件 中 添加 各 种 动画 素材 。 


4.1.1 导入 到 舞台 


导入 到 舞台 是 指 将 其 他 软件 中 创建 或 者 编辑 的 文件 导入 到 当前 场景 舞 人 台中。 执行 【文件 】|【 导 入 】| 
【导入 到 有 舞台】 命令 (或 按 Ctrl+R 组 合 键 ) ， 然 后 在 弹出 的 【导入 】 对 话 框 中 选择 所 要 导入 的 图 像 即 可 
如 图 4-1 所 示 。 
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图 4-1 导入 到 有 台 


4.1.2 导入 到 库 


可 以 将 素材 文件 导入 到 【 库 】 面 板 以 便 重复 使 用 。 另 外 . 当 导 入 多 个 文件 时 ， 如 果 将 其 导入 到 舞台 
中 ， 那 么 这 些 文件 将 重生 在 一 起 ， 不 利于 修改 。 因 此 可 以 将 其 导入 到 【 库 】 中 ， 再 分 别 进行 编辑 。 执 行 
【文件 】|【 导 入 】|【 导 入 到 库 】 命 令 ， 在 弹出 的 【导入 到 库 】 对 话 框 中 选择 所 要 导入 的 图 像 即 可 ， 如 图 
4-2 所 示 。 


4.1.3 打开 外 部 库 


如 果 想 要 使 用 其 他 Flash 源 文件 素材 . 可 以 执行 【文件 ][ 导 入 ][ 打 开外 部 库 ] 命 令 (或 按 CatlrShiftrO 
组 合 键 )， 在 弹出 的 【打开 】 对话 框 中 .选择 当前 文档 所 需要 的 素材 ， 如 图 4-3 所 示 。 
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图 4-3 打开 外 部 库 


4.2 


在 Flash 中 . 所 有 的 制作 部 分 基本 上 都 在 “舞台 ”面板 中 进行 . 而 在 现实 生活 中 . 每 一 个 舞台 都 会 有 
后 合 . 这 个 后 人 台 在 Flash 中 就 是 “ 库 ” 面 板 。“ 库 ”面板 是 Flash 中 存储 和 组 织 元 件 、 位 图 、 矢 量 图 形 、 声 
音 , 视频 等 文件 的 容器 ,方便 在 制作 过 程 中 随时 调用 。 元 件 是 一 种 特殊 的 对 象 ， 可 以 有 效 地 管理 和 整合 
Flash 中 的 各 种 素材 文档 ， 提 高 Flash 中 资源 的 重用 性 。 

本 节 主 要 包括 三 方面 的 内 容 . 即 Flash 元 件 概述 、 创 建 元 件 、 编 辑 元 件 。 通 过 对 本 节 的 学 习 . 对 管理 











:网 页 设计 与 网 站 建设 自学 经 典 :::: 


网 页 设计 与 网 站 建设 自学 经 典 





库 资 源 有 所 了 解 ， 方 便 在 Flash 软件 中 创建 各 种 动画 元 件 。 
4.2.1 Flash 元 件 概述 


元 件 是 Flash 中 最 基本 的 对 象 单位 。Flash 中 的 元 件 包括 三 种 ， 即 影片 剪辑 、 按 钮 以 及 图 形 。 
1. 影片 剪辑 元 件 
影片 剪辑 元 件 是 Flash 动画 中 最 常用 的 元 件 类 型 。 影 片 剪 辑 元 件 中 包含 了 一 个 独立 的 时 间 轴 , 允许 用 
户 在 其 中 创建 动画 片段 、 交 互 式 组 件 、 视 频 、 声 音 甚至 其 他 的 影片 剪辑 元 件 。 
2. 按钮 元 件 
按钮 元 件 是 一 种 基于 组 件 的 元 件 。 按 钮 元 件 中 同样 包含 一 个 独立 的 时 间 轴 ， 但 是 该 时 间 轴 并 非 以 帧 
为 单位 ,而 是 以 4 个 独立 的 状态 作为 单位 。 基 于 这 4 种 单位 ， 用 户 可 以 创建 用 于 响应 鼠标 的 弹 起 、 指 针 
滑 过 、 按 下 和 单 击 4 种 事件 的 帧 。 
3. 图 形 元 件 
图 形 元 件 可 用 于 静态 图 像 ， 并 可 用 来 创建 连接 到 主 时 间 轴 的 可 重用 动画 片段 。 交 互 式 控件 和 声音 
图 形 元 件 的 动画 序列 中 不 起 作用 ， 如 图 4-4 所 示 。 




































































图 4-4 图 形 元 件 


4.2.2 创建 元 件 


在 Flash 中 新 建 空白 文档 ， 然 后 打开 【 库 】 面 板 ， 单 击 其 下 方 的 【新 建 元 件 】 按 钮 国 ， 打开 【创建 新 
元 件 】 对 话 框 ， 如 图 4-5 所 示 。 

在 该 对 话 框 中 ， 用户 可 设置 元 件 的 【名 称 〗 并 在 【类 型 】 下 拉 列 表 中 选择 元 件 的 类 型 。 在 单 击 
【文件 夹 】 右 侧 的 链接 文本 后 ， 可 打开 【 移 至 文件 夹 】 对话 框 ， 在 其 中 设置 元 件 所 存储 的 位 置 ， 如 图 4-6 
所 示 。 

最 后 ， 即 可 在 元 件 中 制作 内 容 ， 单 击 【 场 景 1】 按钮 ， 完成 元 件 的 创建 并 返回 舞台 。 
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图 4-5 


4.2.3 编 


【创建 新 元 件 】 对 话 杠 图 4-6 【〖 移 至 文件 夫 】 对 话 框 


辑 元 件 


在 Flash 中 , 不 仅 可 以 创建 元 件 , 还 可 以 对 已 创建 的 元 件 进行 编辑 。 对 于 已 添加 到 舞台 的 元 件 ， 可 以 





直接 在 舞台 选中 








应 用 到 元 件 中 。 
对 于 尚未 使 用 过 的 元 件 ， 则 需要 在 【 库 】 面 板 中 双击 所 要 编辑 的 元 件 名 称 ， 进入 该 元 件 的 编辑 模式 ， 
对 元 件 内 容 进行 添加 、 修 改 等 操作 ， 如 图 4-7 所 示 。 





h 该 元 件 ， 双 击 进入 编辑 模式 ， 对 元 件 内 部 进行 修改 。 修 改 后 ，Flash 将 


动 把 修改 的 结果 














图 4-7 编辑 元 件 





1 本 绘制 动画 图 形 


在 Flash 叶 











h .可 以 用 笔触 绘制 普通 的 矢量 线段 . 也 可 以 绘制 复杂 的 矢量 


图 








形 。 本 节 主 要 讲述 线条 工具 
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和 钢笔 工具 、 椭 圆 工 具 和 基本 椭圆 工具 、 和 矩形 工具 和 基本 矩形 工具 、 多 角 星 形 工具 、 填 充 颜色 5 方面 的 
内 容 。 用 户 通 过 对 本 节 的 学 习 , 就 可 以 在 Flash 舞台 区 域 中 按 自己 的 想象 ， 自 由 创作 各 种 基本 图 形 . 为 后 
续 章节 的 内 容 学 习 英 定 基础 。 


4.3.1 线条 工具 和 钢笔 工具 


使 用 【线条 工具 】 国 可 以 用 来 绘制 各 种 角度 的 直线 . 它 没有 辅助 选项 . 其 笔触 格式 的 调整 可 以 在 【 属 
性 】 面 板 中 完成 。 单 击 工具 箱 中 的 【线条 工具 】 按 馈 苹 .在 【属性 】 面 板 中 根据 所 需 设置 线条 的 【笔触 
颜色 】 【笔触 高 度 】 和 【笔触 样式 】 等 。 然 后 ,在 舞 全 中 拖 动 鼠标 绘制 线条 即 可 。 

【钢笔 工具 】 国 时 是 利用 贝 塞 尔 曲线 绘制 矢量 图 形 的 重要 工具 ,是 Flash 矢量 图 形 的 基础 ， 其 主要 用 于 
绘制 精确 的 路 径 。 通 过 该 工具 ， 可 以 建立 直线 或 者 平滑 流畅 的 曲线 ， 其 主要 用 于 绘制 比较 精细 且 复 杂 的 
动画 对 象 。 除 此 之 外 ， 还 常常 用 于 抠 图 和 拱 绘 位 图 图 像 。 单 击 工具 箱 中 的 【钢笔 工具 】 按 钮 用 到， 在 舞台 
中 单 击 可 以 在 直线 段 上 创建 点 ， 拖 动 可 以 在 曲线 段 上 创建 点 。 用 户 可 以 通过 调整 线条 上 的 点 来 调整 直线 
段 和 曲线 段 。 

【线条 工具 】 图 与 【钢笔 工具 】 国 的 区 别 在 于 : 【钢笔 工具 】 国 园 通 过 锚 点 绘制 线条 .而 【线条 工具 】 
贺 则 是 以 拉 出 直线 的 方式 绘制 线条 : 【钢笔 工具 】 改 强 可 以 绘制 单条 直线 ， 也 可 以 绘制 多 个 错 点 构成 的 折 
线 ， 但 【线条 工具 】 贺 只 能 绘制 简单 的 直线 。 


4.3.2 ”椭圆 工具 和 基本 椭圆 工具 


使 用 【 椭 贺 工具 】 攻 I 和 【基本 椭 回 工具 】 国 可 以 绘制 正 加 和 椭圆 ， 这 些 圆 形 可 以 用 来 修饰 图 像 、 
制作 按钮 、 组 合 图 形 等 。 
1. 椭圆 工具 

按 住 工具 箱 中 的 【 矩 形 工具 】 按 钮 国 ， 在 弹出 的 菜单 中 选择 【椭圆 工具 】 用 加 ， 然 后， 在 【属性 】 
检查 器 中 设置 图 形 的 【填充 颜色 】. 【笔触 颜 色 】 【笔触 高 度 】 和 【样式 】 等 。 设 置 完成 后 ， 在 舞台 中 单 
击 并 拖 动 鼠标 ， 即 可 绘制 圆 形 。 
2. 基本 椭圆 工具 

在 工具 箱 中 按 住 【椭圆 工具 】 攻 .选择 【基本 椭 回 工具 】 国 .该 工具 与 【 椭 回 工具】 痢 类似 . 只 
是 通过 该 工具 绘制 出 的 图 形 上 包含 有 图 元 节点 。 用 户 可 以 在 【属性 】 检 查 器 中 设置 圆 形 的 【开始 角度 】 
和 【结束 角度 】， 也 可 以 在 启用 【选择 工具 】 后 . 直接 使 用 鼠标 指针 拖 动 节点 来 调整 。 


4.3.3 ”和 矩形 工具 和 基本 矩形 工具 


使 用 【 算 形 工具 】 国 和 【基本 算 形 工具 】 国 可 以 绘制 矩 形 和 正方 形 ， 绘 制 矩 形 的 方法 与 绘制 椭圆 
的 方法 基本 相同 。 
1. 矩形 工具 

选择 【和 矩形 工具 】 国 在 【属性 】 检 查 器 中 设置 图 形 的 【填充 颜色 】 【笔触 颜色 】， 以 及 【矩形 边 
角 半 径 】 等 。 然 后 当 舞 台中 的 光标 变 成 十 字形 时 ， 单 击 并 拖 动 鼠 标 即 可 绘制 所 需 的 矩形 。 
2. 基本 甜 形 工具 

使 用 【基本 和 矩 形 工具 】 国 的 方法 与 【 算 形 工具 】 国 I 相同。 不 同 的 是 ， 在 绘制 矩 形 后 .【 和 矩 形 工具 】 
国 无 法 修改 其 边 角 半 径 .【 基 本 算 形 工具 】 国 I 则 可 以 进行 手工 调整 。 


















































































































































4.3.4 





多 角 星 形 工 具 


使 用 【多 角 星 形 工具 】 国 可 以 方便 地 在 舞 合 中 绘制 多 边 形 和 星 形 。 选 择 【 多 角 星 形 工具 】 
【属性 】 检 查 器 中 的 【选项 】 按 钮 ， 在 弹出 的 【工具 设置 】 对 话 框 中 设置 图 形 的 【样式 】 【 边 数 】 和 【 星 
形 项 点 大 小 】。 然 后 ， 在 舞台 中 拖 动 鼠标 绘制 所 需 的 图 形 。 




















义 星 形 角 尖 与 角 尖 和 止 角 差 之 间 的 比例 。 例 如 通常 所 见 的 正 五 角 星 , 其 角 尖 为 36*、 止 角 为 108 


尖 与 角 尖 和 四 角 差 的 比例 





的 属性 值 为 0.5。 该 属性 最 小 值 为 0， 最 大 值 为 1。 


4.3.5 


在 Flash 绘制 的 网 页 中 ， 各 种 矢量 图 形 由 矢量 笔触 与 填充 构成 。 


填充 颜色 
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图， 单 击 


【工具 设置 】 对 话 框 中 包含 两 种 【样式 】 属 性 ， 即 多 边 形 和 星 形 。【 星 形 项 点 大 小 】 属 性 的 作用 是 定 


?那么 角 


为 : 36/ (108-36) =0.5。 因 此 ， 在 绘制 正 五 角 星 时 ， 应 设置 【 星 形 顶点 大 小 】 


因此 在 用 Flash 绘制 矢量 图 形 时 ,应 





先 了 解 矢量 图 形 笔触 与 填充 的 使 用 方法 。 笔 触 是 矢量 图 形 中 线条 的 总 称 。 在 之 前 的 小 节 中 已 经 介绍 了 使 
用 【线条 工具 】 贺 [钢笔 工具 】 腊 、[ 顶 圆 工 具 】 国 [多角 星 形 工具 】 国 等 一 系列 工具 绘制 各 种 矢 
量 笔触 的 方法 。 

填充 是 填 入 到 闭合 矢量 笔触 内 的 色 块 。Flash 允许 用 户 创建 音色、 渐变 色 的 填充 色彩 ， 或 将 位 图 分 离 
填 入 到 矢量 图 形 中 。 在 绘制 各 种 矢量 图 形 时 ， 用 户 往往 首先 需要 设置 笔触 和 填充 的 各 种 属性 。 
这 些 属性 是 所 有 矢量 图 形 工具 共有 的 属性 ， 因 此 放 在 这 一 小 节 进 行 整体 介绍 。 在 选中 任意 一 种 矢量 工具 
后 , 即 可 在 【属性 】 检 查 器 的 【填充 与 笔触 】 选 项 卡 中 设置 矢量 工具 所 使 用 的 笔触 与 填充 属性 ， 从 而 将 
这 些 属 性 应 用 到 绘制 的 矢量 图 形 上 。 顾 名 思 义 ,【 填 充 和 笔触 】 的 选项 卡 中 包含 了 填充 和 笔触 两 类 属性 设 
置 ， 如 表 4-1 所 示 。 





为 矢量 图 ， 





























表 4-1 【填充 和 笔触 】 的 选项 卡 





属 性 作 用 


笔触 颜色 单 击 其 右 侧 的 颜色 拾取 器 ， 可 在 弹出 的 颜色 框 中 选择 笔触 的 颜色 
填充 颜色 单 击 其 右 侧 的 颜色 拾取 器 ， 可 在 弹出 的 颜色 框 中 选择 填充 的 颜色 
笔触 大 小 拖 动 滑 块 可 以 调节 笔触 的 高 度 

笔触 高 度 输入 笔触 高 度 像素 值 以 调节 笔触 的 高 度 

样式 选择 笔触 的 线条 类 型 ， 包 括 极 细 线 、 实 线 、 虚 线 等 7 种 





编辑 笔触 样式 单 击 此 按钮 ， 可 编辑 自 定 义 的 线条 样式 











缩放 设置 Flash 动画 播放 时 笔触 缩放 的 效果 

提示 选中 该 选项 ， 将 笔触 锚 记 点 保持 为 全 像素 以 防止 出 现 模糊 线 
端点 用 于 定义 矢量 线条 的 端点 处 样式 

接合 用 于 定义 两 个 矢量 线条 之 间接 合 处 的 样式 

尖 角 在 设置 【接合 为 尖 角 后 ， 可 设置 尖 和 角 的 像素 大 小 


在 单 








【笔触 颜色 】 或 【填充 颜色 】 的 颜色 拾取 器 后 .将 打开 Flash 颜色 拾取 框 。 在 该 框 








选择 纯色 或 渐变 色 . 将 其 应 用 到 矢量 图 形 上 . 也 可 以 在 颜色 预览 右 侧 单 击 颜色 的 代码 . 设置 自 
右 侧 的 Alpha 属性 和 作用 是 设置 颜色 的 透明 度 。 在 单 击 【 编 辑 笔触 样式 】 按 钮 后 ,将 打开 【笔触 样式 】 
对 话 框 , 除了 可 编辑 笔触 的 样式 外 .还 可 以 浏览 已 设置 的 样式 。 














ph， 用户 可 
定义 颜色 。 














网 页 设计 与 网 站 建设 自学 经 典 





处 理 动画 文本 


Flash 在 文字 处 理 方面 有 着 出 色 的 表现 . 且 功 能 非常 强大 ,不 但 可 以 输入 静态 文本 ， 更 可 以 制作 交互 
式 文本 及 绚丽 的 文字 动画 。 在 一 些 成 功 的 网 页 上 . 经 常会 看 到 利用 文字 制作 的 特效 动画 . 因此 文本 是 Flash 
动画 中 不 可 缺少 的 重要 组 成 部 分 。 

本 节 主 要 讲述 创建 静态 文本 和 动态 文本 、 输 入 文本 和 TLF 文本 。 用 户 通 过 对 本 节 的 学 习 ， 就 可 以 按 
自己 的 要 求 处 理 动画 文本 ， 为 学 习 后 续 章节 的 内 容 奠定 基础 。 


4.4.1 创建 静态 文本 和 动态 文本 


静态 文本 用 于 显示 最 普通 的 内 容 文本 。 这 些 文本 内 容 在 Flash 中 是 固定 的 , 不 允许 在 动画 播放 时 更 改 。 
选择 工具 箱 中 的 【文本 工具 】 国 .在 【属性 】 检 查 器 中 设置 【文本 引擎 】 为 “传统 文本 "， 并 设置 【 文 
本 类 型 】 为 “静态 文本 。 

然后 ， 单 击 舞 台中 要 插入 文本 的 位 置 ， 即 可 创建 一 个 矩形 文本 框 ， 并 在 该 文本 框 中 输入 文本 内 容 。 
动态 文本 是 可 以 显示 动态 更 新 的 文本 。 单 击 工具 箱 中 的 【文本 工具 】 有 在 【属性 】 检 查 器 中 设置 【 文 
本 引擎 】 为 “传统 文本 “， 并 设置 【文本 类 型 】 为 “动态 文本 “。 然 后 在 舞台 中 单 击 直接 创建 标准 大 小 
的 动态 文本 框 ， 或 拖 动 鼠标 ,绘制 一 个 矩形 区 域 ， 作 为 自 定义 大 小 es 为 动态 文本 框 输入 文 
本 内 容 的 方法 与 输入 静态 文本 类 似 。 


4.4.2 输入 文本 和 TLF 文本 


输入 文本 也 是 一 种 特殊 的 文本 。 为 文档 插入 输入 文本 后 ， 用户 在 浏览 动画 时 ， 可 以 直接 单 击 输入 文 
本 的 区 域 . 在 其 中 输入 文本 信息 。 输 入 文本 通常 和 ActionScript 脚本 结合 ,被 添加 到 各 种 集成 动态 技术 的 
网 页 动画 中 。 

单 击 工具 箱 中 的 【文本 工具 】 国 在 【属性 】 检 查 器 中 设置 【文本 引擎 】 为 【传统 文本 】， 并 设置 
【文本 类 型 】 为 【动态 文本 ]。 然 后 ， 在 舞台 中 单 击 或 拖 动 鼠 标 即 可 创建 动态 文本 框 。 与 动态 文本 类 似 ， 
输入 文本 也 可 以 设置 实例 名 称 并 供 各 种 脚本 程序 调用 。 同 时 ， 输 入 文本 最 大 的 优势 在 于 允许 用 户 自行 编 
辑 内 容 ， 从 而 完善 Flash 的 交互 性 。TLF 是 Flash 新 增 的 一 种 文本 排版 引擎 。 相 比 传统 文本 ，TLF 文本 拥 
有 更 多 、 更 丰富 的 文本 布局 功能 以 及 文本 的 精确 属性 。 单 击 工具 箱 中 的 【文本 工具 】 国 .在 【属性 ] 检 
查 器 中 【传统 文本 】 下 拉 列 表 中 选择 【TLF 文本 】 选 项 ， 即 可 为 网 页 添加 TLF 文本 。 

在 选择 【TLF 文本 】 后 ， 即 可 在 下 方 选择 具体 的 TLF 文本 类 型 。TLF 文本 有 三 种 主要 的 基本 类 型 , 
即 只 读 、 可 选 以 及 可 编辑 。 只 读 文 本 与 普通 的 文本 类 似 ， 用 户 只 能 查看 ， 而 不 能 通过 鼠标 选择 或 编辑 。 
可 选 文本 同样 不 能 编辑 ， 但 允许 用 户 通过 鼠标 选择 文本 内 容 ， 复 制 到 其 他 位 置 。 可 编辑 文本 与 传统 的 输 
入 文本 类 似 ， 人 允许 用 户 编辑 文本 容器 中 的 内 容 。 在 文本 类 型 右 侧 ， 用 户 可 单 击 【 改 变 文本 方向 】 按 钮 ， 
设置 文本 以 水 平方 向 流动 或 以 垂直 方向 流动 。 


45 CLT 


Flash 动画 具有 适用 范围 广 、 占 用 空间 小 、 支 持 跨 平台 播放 以 及 强大 的 交互 性 等 优点 。 正 因为 这 些 优 
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点 ，Flash 不 仅 是 网 页 动画 的 制作 软件 . 也 是 网 页 多 媒体 的 承载 者 。 
本 节 主 要 讲述 创建 补 间 动 画 、 引 导 动画 、 遮 章 动 画 、 逐 帧 动画 、 补 间 形 状 动画 和 传统 补 间 动 画 。 用 
户 通过 对 本 节 的 学 习 ， 就 可 以 制作 符合 自己 要 求 的 动画 .为 学 习 后 续 章 节 的 内 容 黄 定 基础 。 
4.5.1 创建 补 间 动 画 
在 Flash 中 , 用 户 可 以 用 简便 的 方式 创建 和 编辑 丰富 的 动画 。 同 时 , 还 允许 用 户 以 可 视 化 的 方式 编辑 
动画 。 网 页 中 常见 的 动画 形式 ， 如 表 4-2 所 示 。 
表 4-2 网 页 中 常见 的 动画 形式 


动画 形式 描 述 
访问 者 进入 网 站 前 播放 的 动画 。 进 入 动画 设计 的 好 坏 直 接 影响 到 网 站 给 访问 者 的 第 一 印象 ， 所 











进入 动 画 | 以 趋 来 越 多 的 网 站 开始 重视 进入 动画 的 设计 
[通常 所 见 的 Logo 国标 为 静态 的 图 片 ， 其 实 也 可 以 制作 成 动画 。 但是， 目前 采用 这 种 形式 1080 
Logo 图 标 Ct 
的 网 站 较 少 
训 反 宁 计 | 于 术 革 划 可 以 让 导 记 问 才 测 贤 网 站 内 的 信息 。 与 全 的 导 枯 东 相 比 ,Fash 名 衣 宁 来 的 表现 天 有 
更 加 丰富 ， 从 而 给 访问 者 一 各 新颖 的 语 觉 
Re 按 亿 为 这 转 网 页 或 执行 亲 此 任务 《如 提交 表单 ) 起 到 了 不 可 痊 代 的 作用 。 为 了 能 够 表现 更 强 的 


动画 效果 ， 也 可 以 将 按钮 制作 成 Flash 动画 

re Banner 是 最 常见 的 网 络 广 告 形式 之 一 ,通常 是 静态 图 像 、GIF 动态 图 像 或 Flash 动画 。 其 中 Flash 
动画 的 表现 能 力 最 强 ， 因 此 也 受到 大 部 分 网 站 的 青 昧 

在 很 多 网 站 中 都 可 以 看 到 自动 切换 的 图 片 展示 Flash， 它 在 指定 的 区 域内 可 以 循环 展示 多 个 图 

片 ， 正 因为 此 通常 用 于 宣传 广告 图 片 的 展示 

透明 Flash 通常 添加 到 网 页 的 静态 图 像 上 面 ， 由 于 其 背景 可 以 设置 为 透明 ， 所 以 能 够 快速 地 让 

静态 图 像 具 有 动画 效果 ， 为 网 页 图 像 起 到 了 很 好 的 点 组 效果 

除了 可 以 将 Flash 作为 元 素 融入 到 网 页 中 ， 还 可 以 将 整个 网 站 制作 成 Flash。 虽 然 在 加 载 过 程 中 

需要 更 长 的 时 间 ， 但 是 所 表现 的 整体 效果 却 是 传统 网 站 无 法 比拟 的 


图 片 展示 


透明 Flash 


Flash 整 站 





补 间 动 画 以 元 件 对 象 为 核心 ， 一 切 补 间 的 动作 都 是 基于 元 件 的 。 因 此 ， 在 创建 补 间 动 画 之 前 ， 首 先 
要 在 舞台 中 创建 元 件 ， 作 为 起 始 关键 帧 中 的 内 容 。 例 如 ， 新建“ 于 
虫 ”图 层 , 将 “ 标 虫 ”素材 图 像 拖 入 到 舞台 中 ,并 将 其 转换 为 影片 
剪辑 元 件 。 右 击 第 1 帧 在 弹出 的 快捷 菜单 中 执行 【创建 补 间 动 画 】 
命令 。 此 时 ，Flash 将 包含 补 间 对 象 的 图 层 转 换 为 补 间 图 层 ， 并 在 该 
图 层 中 创建 补 间 范 围 。 右 击 补 间 范 围 内 的 最 后 一 帧 ， 执 行 【插入 关 
键 帧 】|【 位 置 】 命 令 ， 在 补 间 范 围 内 插入 一 个 鞭 形 的 属性 关键 帧 。 
然后 ， 将 对 象 拖 动 至 舞台 的 右 侧 ， 并 显示 补 间 动画 的 运动 路 径 。 最 
后 按 Ctrl+Enter 组 合 键 , 即 可 预览 “ 标 虫 ”从 左边 私 到 右边 的 补 间 动 
画 ， 如 图 4-8 所 示 。 
当然 ,也 可 以 在 单个 帧 中 定义 多 个 属性 ， 而 每 个 属性 都 会 驻 留 
在 该 帧 中 。 其 中 ， 属 性 关键 帧 包含 的 各 个 属性 说 明 如 下 。 图 4-8 创建 补 间 动 画 
位 置 : 对 象 的 x 坐标 或 y 坐标 。 
缩放 : 对 象 的 宽度 或 高 度 。 
倾斜 : 倾斜 对 象 的 x 轴 或 y 轴 。 
旋转 : 以 x、y 和 = 轴 为 中 心 旋转 。 
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颜色 : 颜色 效果 .包括 亮度 、 色 调 、Alpha 透明 度 和 高 级 颜色 设置 等 。 
滤 镜 : 所 有 滤 镜 属性 ， 包 括 阴影 、 发 光 、 斜 角 等 。 


4.5.2 引导 动画 


运动 引导 动画 是 传统 补 间 动 画 的 一 种 延伸 ， 用 户 可 以 在 舞台 中 绘制 一 条 辅助 线 作为 运动 路 径 ， 设 置 
让 某 个 对 象 沿 着 该 路 径 运动 。 创 建 运动 引导 动画 至 少 需 要 两 个 图 层 . 一 个 是 普通 图 层 ， 用 于 存放 运动 的 
对 象 ; 另 一 个 是 运动 引导 层 ， 用 于 绘制 作为 对 象 运动 路 径 的 辅助 线 。 
首先 在 文档 中 新 建 一 个 图 层 ， 将 作为 运动 引导 的 对 象 拖 入 到 舞台 中 . 并 将 其 转换 为 影片 剪辑 。 右 击 
该 图 层 ， 在 弹出 的 快捷 菜单 中 执行 【添加 传统 运动 引导 层 】 命 令 ， 即 会 在 该 图 层 的 上 面 创建 一 个 运动 引 
导 层 。 选 择 运 动 引导 层 . 单 击 工具 箱 中 的 【铅笔 工具 】. 在 舞台 中 绘 
制 一 条 曲线 ， 作 为 “ 标 虫 ”运动 的 路 径 。 选 择 “ 标 虫 ”图 层 的 第 1 
帧 ， 将 “ 标 虫 ”影片 剪辑 拖 入 到 曲线 的 开始 处 ， 使 中 心 点 吸附 到 开 
始 端点 。 
选择 图 层 的 最 后 1 帧 ， 插 入 关键 帧 。 然 后 ， 将“ 标 虫 ”影片 剪 
辑 拖 动 到 曲线 的 结尾 处 ， 同 样 将 中 心 点 吸附 到 结尾 端点 。 右 击 图 层 
中 的 任意 一 帧 ， 在 弹出 的 快捷 菜单 中 执行 【创建 传统 补 间 】 命 令 ， 
创建 飘 虫 ”沿路 径 运动 的 补 间 动 画 。 最 后 按 Ctl+Enter 组 合 键 . 即 @ 
可 预览 “ 标 虫 ” 沿 指定 路 径 移动 的 补 间 动 画 ， 如 图 4-9 所 示 。 


4.5.3 遮 罩 动画 


遮 曾 动画 是 传统 补 间 动 画 的 一 种 扩展 和 延伸 。 在 制作 遮 淖 动 画 时 ， 需 要 在 动画 图 层 上 创建 一 个 遮 曾 
层 ,然后 在 遮 晶 层 上 绘制 图 形 ， 并 将 图 层 打 散 。 在 播放 动画 时 ， 只 有 被 遮 淖 层 遮 住 的 内 容 才 会 显示 ， 而 
其 他 部 分 将 被 隐藏 起 来 。 遮 章 层 本 身 在 影片 中 是 不 可 见 的 。 

Flash 中 的 遮 晶 可 分 为 静态 遮 测 和 动画 庶 晶 两 种 。 

1. 静态 遮 罩 

静态 遮 曙 的 作用 类 似 Photoshop 中 的 蒙 版 ， 可 以 帮助 用 户 控制 图 层 的 显示 区 域 。 在 Flash 中 ， 在 需要 
被 遮 章 的 图 层 上 方 创建 图 层 ， 即 可 在 新 建 的 图 层 中 绘制 图 形 ， 将 需要 显示 的 图 层 部 分 遮 章 住 。 在 绘制 完 
成 遮 罩 层 中 的 内 容 之 后 ， 用户 即 可 右 击 该 图 层 . 执行 【 遮 草 层 】 命 令 ， 将 图 层 转 换 为 诞 罩 层 。 

2. 动画 遮 罩 

动画 遮 罩 即 在 动画 中 的 放 蕴 层 ， 其 既 可 以 是 诞 章 层 制作 的 动画 ， 又 可 以 是 被 遮 罩 层 制作 的 动画 。 例 

如 ， 通过 遮 重 层 控制 被 遮 章 层 逐 渐 显 示 等 。 


4.5.4， 逐 帧 动画 


用 户 可 以 在 时 间 轴 中 通过 更 改 连 续 帧 中 的 内 容 来 创建 逐 帧 动画 ,还 可 以 在 舞台 中 创建 移动 、 缩 放 、 
旋转 、 更 改 颜色 和 形状 等 效果 。 创 建 逐 帧 动画 的 方法 有 两 种 : 一 种 是 通过 在 时 间 轴 中 更 改 连续 帧 的 内 容 
另 一 种 是 通过 导入 图 像 序列 来 完成 ,该 方法 需要 导入 不 同 内 容 的 连贯 性 图 像 。 

下 面 将 通过 更 改 连 贯 帧 中 的 内 容 创 建 逐 帧 动画 。 新 建 空白 文档 ， 将 素材 矢量 图 像 导 入 到 舞台 中 。 在 
图 层 的 第 2 帧 处 插入 关键 帧 . 修改 人 物 腿 部 的 姿势 。 使 用 相同 的 方法 . 在 第 3 帧 和 第 4 帧 处 分 别 插入 关 




































































图 4-9 引导 动画 
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键 帧 ， 并 继续 修改 腿 部 的 姿势 .使 其 呈现 跑步 的 连续 动作 。 修 改 完成 后 . 执行 【控制 】|【 测 试 影片 】 命 
令 即 可 预览 动画 效果 .如 图 4-10 所 示 。 











图 4-10 逐 帧 动画 


4.5.5 补 间 形 状 动画 


补 间 形 状 动画 是 对 矢量 图 形 的 各 关键 节点 位 置 进行 操作 而 制作 成 的 动画 。 在 补 间 形 状 动画 中 ,用户 
需要 提供 补 间 的 初始 形状 和 结束 形状 ， 从 而 为 Flash 的 补 间 提 供 依据 。 

选择 图 层 的 第 1 帧 作为 开始 关键 帧 ,输入 文本 “湛蓝 天 空 ”， 执 行 【 修 改 】|【 分 离 】 命 令 两 次 ， 将 其 
转换 为 图 形 。 然 后 , 在 第 30 帧 处 插入 空白 关键 帧 , 输入 文本 “Blue Sky ,用 同样 的 方式 将 其 转换 为 图 形 。 
然后 ， 右 击 两 个 关键 帧 之 间 的 任意 一 个 普通 帧 ， 执 行 【创建 补 间 形 状 】 命 令 ， 制 作 补 间 形 状 动画 ， 如 图 
4-11 所 示 。 
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湛蓝 天 空 ”渝中 BACBI Blve Sky 


图 4-11 补 间 形 状 动画 


4.5.6 ”传统 补 间 动 画 


与 补 间 形 状 动画 类 似 , 传统 补 间 动 画 的 作用 是 根据 用 户 提供 的 一 个 元 件 在 两 个 关键 帧 中 的 位 置 差 异 , 
生成 该 元 件 移动 的 动画 。 在 补 间 动 作 动画 中 , 用 户 需要 提供 元 件 的 初始 位 置 和 结束 位 置 以 为 Flash 提供 补 
间 的 依据 。 

选择 图 层 的 第 1 帧 作为 开始 关键 帧 ， 导 入 太阳 的 图 像素 材 。 然 后 ， 在 第 30 帧 处 插入 关键 帧 。 右 击 两 
个 关键 帧 之 间 的 任意 一 个 普通 帧 ,执行 【创建 传统 补 间 】 命 令 ， 即 可 拖 动 第 2 个 关键 帧 ， 制 作 补 间 动 作 
动画 ， 如 图 4-12 所 示 。 
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4-12 传统 补 间 动 画 
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Flash 滤 镜 效果 





Flash 与 Photoshop 的 滤 镜 在 本 质 上 有 所 不 同 ， 在 Photoshop 中 ， 滤 镜 的 作用 对 象 是 图 层 ， 一 切 滤 镜 
特效 都 是 围绕 着 图 层 实现 的 ， 而 在 Flash 中 . 滤 镜 的 作用 对 象 是 文本 、 按 钮 元 件 和 影片 剪辑 元 件 。 本 节 主 








要 讲述 投影 、 模 糊 、 发 光 和 和 斜 角 、 渐 变 发 光 和 渐变 斜 角 、 调 整 颜色 、 动 画 预 设 。 用 户 通 过 对 
就 可 以 制作 符合 自己 要 求 的 Flash 滤 镜 效果 .为 学 习 后 续 章 节 的 内 容 奠定 基础 。 


4.6.1 投影 


本 节 的 学 习 . 


要 使 用 滤 镜 功能 ,首先 在 舞台 上 选择 文本 、 按 钮 或 影片 剪辑 对 象 ， 然 后 进入 【属性 】 检 查 器 的 【 滤 


镜 】 选 项 卡 ， 单 击 【 添 加 滤 镜 】 按 钮 ， 从 弹出 的 菜单 中 选择 相应 的 滤 镜 ， 如 图 4-13 所 示 。 








图 4-13 投影 


在 【 滤 镜 】 选 项 卡 的 下 方 有 6 个 按钮 .其 作用 如 表 4-3 所 示 。 


表 4-3 【 滤 镜 】 选 项 卡 的 图 标 、 名 称 和 作用 
按钮 图 标 
BJ 








单 击 该 按钮 ， 可 在 弹出 的 滤 镜 菜单 中 为 选中 的 舞台 对 象 添加 波 镜 















按钮 名 称 
对 象 应 用 预 设 洪 镜 


添加 滤 镜 
预 设 
单 击 该 按钮 ， 可 在 弹出 的 菜单 中 对 小 镜 进行 复制 和 粘贴 操作 


单 击 该 按钮 ， 可 将 已 修改 的 滤 镜 保存 为 预 设 洪 镜 ， 也 可 重 命名 、 删 除 或 为 舞台 















启用 或 禁用 滤 镜 | 选择 滤 镜 后 ， 可 单 击 该 按钮 ， 禁 止 洪 镜 显示 或 允许 滤 镜 显示 








选择 滤 镜 后 ， 单 击 该 按钮 ， 可 将 已 修改 的 滤 镜 属性 重 置 为 默认 属性 
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选择 滤 镜 后 ， 单 击 该 按钮 ， 可 将 滤 镜 删除 
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Flash 允许 用 户 为 同一 个 文本 、 按 钮 元 件 或 影片 剪辑 元 件 应 用 多 个 相同 或 不 同 的 滤 镜 ， 以 实现 复杂 的 
效果 .同时 允许 对 某 个 舞台 对 象 的 所 有 滤 镜 进行 复制 或 粘贴 、 删 除 等 操作 。 在 滤 镜 菜单 中 共 包含 7 种 效 
果 ， 这 些 效果 可 以 分 为 两 类 : 一 类 是 在 原 对 象 的 基础 上 直接 添加 样式 ， 其 中 有 投影 模糊、 发 光 、 渐 变 
发 光 、 斜 角 、 渐 变 斜 角 滤 镜 : 另 一 类 是 通过 调整 颜色 滤 镜 改变 原 对 象 的 色调 。 投 影 给 人 一 种 目标 对 象 上 
方 有 独立 光源 的 印象 ， 它 能 够 模拟 对 象 投 影 到 一 个 表面 的 效果 。 在 投影 滤 镜 选项 中 ， 可 以 设置 【距离 】、 
【角度 】 和 【强度 】 等 参数 ， 使 其 产生 不 同 的 投影 效果 。 在 添加 投影 滤 镜 后 ， 可 以 在 选项 卡 中 设置 以 下 
参数 。 

模糊 : 该 选项 用 于 控制 投影 的 宽度 和 高 度 。 

强度 : 该 选项 用 于 设置 阴影 的 明暗 度 ， 数 值 越 大 ， 阴 影 就 越 暗 。 

品质 :该 选项 用 于 控制 投影 的 质量 级 别 . 设置 为 【高 】 则 近似 于 高 斯 模糊 ， 设 置 为 【 低 】 可 以 实现 
最 佳 的 回放 性 能 。 

颜色 : 单 击 此 处 的 色 块 ， 可 以 打开 【颜色 拾取 器 】， 设 置 阴影 的 颜色 。 

角度 : 该 选项 用 于 控制 阴影 的 角度 ， 在 其 中 输入 一 个 值 或 单 击 角度 选取 器 并 拖 动 角度 盘 。 

距离 : 该 选项 用 于 控制 阴影 与 对 象 之 间 的 距离 。 

挖 空 ; 选择 此 复 选 框 ， 可 以 从 视觉 上 隐藏 源 对 象 ， 并 在 挖 空 图 像 上 只 显示 投影 。 

内 侧 阴 影 : 启用 此 复 选 框 ， 可 以 在 对 象 边界 内 应 用 阴影 。 

隐 茂 对象， 启用 此 复 选 框 ， 可 以 隐藏 对 象 并 只 显示 其 阴影 ， 从 而 更 轻松 地 创建 蜗 真 的 阴影 。 


4.6.2 模糊、 发 光 和 和 斜 角 


模糊 滤 镜 可 以 柔 化 对 象 的 边缘 和 细节 ， 消 除 图 像 的 锯齿 。 将 模糊 应 用 于 对 象 ， 可 以 让 它 看 起 来 好 像 
位 于 其 他 对 象 的 后 面 或 者 使 对 象 看 起 来 好 像 是 运动 的 。 模 糊 滤 镜 的 选项 只 有 三 种 包括 【模糊 X】.【 模 
糊 Y】 以 及 【品质 】， 其 作用 与 投影 滤 镜 中 的 同名 选项 相同 。 

发 光 滤 镜 的 作用 是 为 对 象 应 用 颜色 .模拟 光 晕 效果 。 发 光 滤 镜 包 括 【 模 糊 X】. 【模糊 Y] 【强度 】、 
【品质 】 【颜色 】 【 挖 空 】 以 及 【内 发 光 】7 种 选项 ， 其 选项 作用 与 投影 滤 镜 中 的 各 选项 作用 类 似 。 斜 角 
滤 镜 可 以 向 对 象 应 用 局 部 加 亮 效 果 , 使 其 看 起 来 凸 出 于 背景 表面 。 在 Flash 中 , 此 滤 镜 功能 多 用 于 按钮 元 
件 。 斜 角 滤 镜 的 选项 大 部 分 与 投影 滤 镜 重复 ， 然 而 有 些 选项 属于 斜 角 滤 镜 独 有 ， 如 下 所 示 。 

(1) 加 亮 显 示 : 单 击 右 侧 的 色 块 ， 即 可 打开 颜色 拾取 器 ,选择 为 斜 角 加 亮 的 颜色 。 

(2) 类 型 : 设置 斜 角 滤 镜 出 现 的 位 置 ， 包 括 内 侧 、 外 侧 和 全 部 三 种 。 


4.6.3 渐变 发 光 和 渐变 斜 角 


渐变 发 光 滤 镜 是 发 光 滤 镜 的 扩展 ， 其 可 以 把 渐变 色 作为 发 光 的 颜色 ,实现 多 彩 的 光 晕 。 渐 变 发 光 滤 
镜 的 选项 比 发 光 渡 镜 多 了 两 个 ,包括 【类 型 】 和 【渐变 】。【 类 型 】 选 项 可 设置 渐变 发 光 的 位 置 ， 而 【 渐 
变 】 选 项 则 用 于 设置 渐变 发 光 的 颜色 。 

应 用 渐变 斜 角 可 以 产生 一 种 凸 起 效果 . 使 得 对 象 看 起 来 好 像 从 背景 上 凸 起 . 且 斜 角 表 面 有 渐变 颜色 。 
渐变 斜 角 要 求 渐变 中 间 有 一 种 颜色 的 Alpha 值 为 0。 渐 变 斜 角 滤 镜 中 的 参数 只 是 将 斜 角 滤 镜 中 的 【 阴 
影 】 和 【加 亮 显 示 】 颜 色 控件 ， 蔡 换 为 【渐变 颜色 】 控 件 ， 所 以 渐变 斜 角 立 体 效 果 是 通过 渐变 颜色 来 实 
现 的 。 


















































网 页 设计 与 网 站 建设 自学 经 典 


4.6.4 调整 颜色 


调整 颜色 滤 镜 的 作用 是 设置 对 象 的 各 种 色彩 属性 ， 在 不 破坏 对 象 本 身 填 充 色 的 情况 下 ， 转 换 对 象 的 
颜色 ， 以 满足 动画 的 需求 。 调 整 颜 色 滤 镜 中 包含 4 个 选项 ， 其 详细 介绍 如 下 。 

亮度 : 调整 对 象 的 明亮 程度 ， 其 值 范围 是 -100 一 100， 默认 值 为 0。 当 亮度 为 -100 时 ， 对 象 被 显示 为 
全 黑色 。 而 当 亮度 为 100 时 ， 对 象 被 显示 为 白色 。 

对 比 度 : 调整 对 象 颜色 中 黑 到 白 的 渐变 层次 ， 其 值 范围 是 -100 一 100， 默 认 值 为 0。 对 比 度 越 大 ， 则 
从 黑 到 白 的 渐变 层次 就 越 多 ， 色 彩 越 丰富 。 反 之 ， 则 会 使 对 象 给 人 一 种 灰 蒙蒙 的 感觉 。 

饱和 度 : 调整 对 象 颜 色 的 纯度 ， 其 值 范围 是 -100 一 100， 默认 值 为 0。 饱 和 度 越 大 ， 则 色彩 越 丰富 . 
如 饱和 度 为 -100， 则 图 像 将 转换 为 灰 度 图 。 

色相 是 色彩 的 相貌 ,用 于 调整 色彩 的 光谱 ， 使 对 象 产生 不 同 的 色彩 ， 其 值 范围 是 -180 一 180， 黑 认 值 
为 0。 例 如， 原 对 象 为 红色 .将 对 象 的 色相 增加 60， 即 可 转换 为 黄色 。 


4.6.5 动画 预 设 


使 用 动画 预 设 ， 用 户 可 以 通过 简单 的 鼠标 单 击 ， 为 元 件 应 用 各 种 补 间 动 画 ， 快 速 创建 动画 内 容 ， 提 
高 动画 设计 的 效率 。 动 画 预 设 可 应 用 于 各 种 文本 字段 、 影 片 剪 辑 元 件 和 按钮 元 件 。 在 为 元 件 应 用 动画 预 
设 之 前 ， 需 要 先 执行 【窗口 】|【 动 画 预 设 】 命 令 ， 打开 【动画 预 设 】 面 板 。 

动画 预 设 面板 中 包括 【 预 设 浏览 } 【 预 设 列表 】 等 区 域 以 及 下 方 的 一 些 按钮 等 。 在 工作 区 中 选择 要 
添加 动画 预 设 的 元 件 或 文本 后 . 即 可 在 【动画 预 设 】 面 板 中 选择 相应 的 预 设 项 目 , 查看 【 预 设 浏览 】 Flash 
提供 了 32 种 自 带 的 动画 预 设 ,可 供用 户 调用 , 几乎 所 有 自 带 的 预 设 
都 是 由 缓 动 和 缩放 以 及 模糊 等 滤 镜 制作 而 成 的 。 例 如 ,名 为 “脉搏 
的 动画 预 设 .可 使 元 件 按照 一 定 的 规律 缩放 .模仿 心脏 跳动 的 效果 。 EL 呈 国 一 EU 
用 户 可 自 定义 动画 预 设 。 例 如 ， 制 作 一 段 动画 ， 然 后 用 鼠标 选择 时 


间 轴 中 的 帧 ， 单 击 【 动 画 预 设 】 面 板 下 方 的 【将 选区 另存 为 预 设 】 
按钮 EE0， 即 可 创建 新 的 动画 预 设 ， 如 图 4-14 所 示 。 Lh 宁国 ~ 国 
除 此 之 外 , 用户 还 可 选中 补 间 动 画 的 元 件 . 然后 右 击 , 执行 【 另 ! ! 

存 为 动画 预 设 】 命 令 ， 同 样 可 以 将 补 间 动 画 保 存 为 新 的 动画 预 设 。 
在 保存 动画 预 设 时 ，Flash 将 打开 【将 预 设 另存 为 】 对 话 框 . 用 户 可 
在 对 话 杠 中 设置 这 些 自 定义 动画 预 设 的 名 称 。 用 户 自 定义 的 预 设 是 没有 预 设 预览 的 。 在 【动画 预 设 】 面 
板 中 单 击 【 删 除 项 目 】 按 钮 EE， 可 将 已 添加 的 动画 预 设 从 列表 中 删除 。 


.四国 综合 实战 

































































图 4-14 动画 预 设 








本 章 概 要 性 地 介绍 了 制作 网 页 动画 Flash 的 一 些 常用 工具 . 为 本 书后 续 的 学 习 打 下 坚实 的 基础 。 本 章 
从 导入 动画 素材 开始 . 讲述 了 管理 库 资源 、 绘 制 动 画图 形 、 处 理 动画 文本 、 网 页 动画 类 型 、Flash 滤 镜 效 
果 工 具 的 基本 用 法 ,制作 吸引 人 的 网 页 的 一 些 方法 和 相关 技术 ， 接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 
容 进行 实践 。 
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4.7.1 实战 : 制作 网 站 进入 动画 


首先 通过 渐 显 的 方式 在 指定 的 圆 形 区 域 展示 室内 背景 图 像 ， 然后 再 利用 缓 动 补 间 动 画 逐 步 显 示 室 内 
家 居 图 像 以 及 动画 文字 , 使 整个 动画 具有 较 强 的 连贯 性 。 本 例 将 使 用 Flash 设计 并 制作 网 站 进入 动画 , 主 
要 练习 创建 补 间 动 画 、 设 置 缓 动 、 设 置 Alpha 透明 度 、 设 置 透明 度 、 设 置 动画 缓 动 、 输 入 文本 、 添 加 发 
光 滤 镜 ， 如 图 4-15 所 示 。 
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图 4-15 制作 网 站 进入 动画 














STEP|01 设置 家 居 图 层 。 在 “图 形 动画 2” 图 层 的 上 面 新 建 “ 家 居 ” 图 层 .在 第 60 帧 处 插入 关键 帧 。 执 
行 【 文 件 】|【 导 入 】|【 打 开外 部 库 】 命 令 ， 在 弹出 的 对 话 框 中 打开 “素材 .fla” 文 档 ， 然 后 将 【外 部 库 】 
面板 的 “家 居 ” 图 像 拖 入 到 舞台 的 圆 形 区 域 中 ,并 将 其 转换 为 “家 居 ” 影 片 剪辑 。 右 击 第 60 帧 ， 在 弹出 
的 快捷 菜单 中 创建 补 间 动 画 ， 在 【属性 】 检 查 器 中 设置 “家 居 ” 影 片 剪辑 的 Alpha 值 为 “10%"。 然 后 在 
第 70 帧 处 插入 关键 帧 ， 设 置 影片 剪辑 的 Alpha 值 为 “100%” ， 如 图 4-16 所 示 。 












































图 4-16 设置 家 居 图 层 
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STEP|02 设置 沙发 图 层 。 新建“ 沙发 ”图 层 .在 第 70 帧 处 插入 关键 帧 , 将“ 沙发” 图像 拖 入 到 舞台 中 ， 
并 将 其 转换 为 影片 剪辑 ,设置 其 Alpha 值 为 “25%”。 然 后 创建 补 间 动 画 . 选择 第 80 帧 ,将 “沙发 ”影片 
剪辑 向 左 移动 ， 并 设置 Alpha 值 为 “100%“ 。 选 择 补 间 范 围 中 的 任意 一 帧 . 在 【属性 】 检 查 器 中 设置 补 间 
动画 的 【 缓 动 】 为 “50 输出 "。 然 后 新 建 “ 茶 几 ” 图 层 . 使 用 相同 的 方法 制作 “茶几 ”向 右 渐 显 的 补 间 动 


并 在 【属性 】 检 查 器 中 设置 【 缓 动 】 同 样 为 “50 输出 ， 如 图 4-17 所 示 。 
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图 4-17 设置 沙发 图 层 


STEP|03 设置 相片 图 层 。 新 建 “ 相 片 ” 图 层 .在 第 80 帧 处 插入 关键 帧 ， 将 “相片 ”图 像 拖 入 到 舞台 中 ， 
并 转换 为 影片 剪辑 , 设置 其 Alpha 值 为 “25% 。 然 后 创建 补 间 动 画 . 选择 第 90 帧 ,向 左 移动 该 影片 剪辑 ， 
并 更 改 Alpha 值 为 “100%“。 新 建 “ 慧 美 ”图 层 ， 在 第 85 帧 处 插入 关键 帧 ， 在 舞台 中 输入 文字 “ 慧 美 ， 
并 执行 【修改 】|【 分 离 】 命 令 将 其 分 离 成 图 形 。 然 后 . 选择 【颜料 桶 工具 】， 在 【颜色 】 面 板 















































设置 桔 红 
渐变 色 ， 并 填充 文字 ， 如 图 4-18 所 示 。 
六 | wh 
re 
4 J 章 人 
= 香雪 壮 
了 二 天 





图 4-18 设置 相片 图 层 
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STEP|04 设置 家 居 文字 图 层 。 将 文字 图 形 转换 为 影片 剪辑 . 创建 补 间 动 画 ， 在 【属性 】 检 查 器 中 设置 其 
Alpha 值 为 “25%” 。 然 后 选择 第 95 帧 ， 向 下 移动 该 影片 剪辑 ， 并 更 改 Alpha 值 为 “100%*。 新建 “家 居 ” 
图 层 ， 在 第 90 帧 处 插入 关键 帧 ， 在 舞台 中 输入 文字 “家居 ， 并 在 【属性 】 检 查 器 中 为 其 添加 “发 光 - 
滤 镜 .设置 其 【颜色 】 为 “灰色 (加 99999) 。 然 后 创建 补 间 动 画 ， 选 择 第 100 帧 ， 向 上 移动 该 文字 ,如 
图 4-19 所 示 。 
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图 4-19 设置 家 居 文 字 图 层 














STEP|05 设置 进入 网 站 图 层 。 新建“ 进入 网 站 ”图 层 , 在 第 105 帧 处 插入 关键 帧 , 在 舞台 中 输入 文本 “ 进 
入 网 站 ”， 将 其 转换 为 按钮 元 件 ， 并 设置 Alpha 值 为 “15%”"。 然 后 创建 补 间 动 画 ， 选 择 第 110 帧 ， 向 上 移 
动 该 按钮 元 件 ， 并 更 改 Alpha 值 为 “100%。 。 在 “ 遮 章 ” 层 上 面 新 建 ActionScript 图 层 ， 在 最 后 1 帧 处 插 


入 关键 帧 ， 打 开 【 动 作 】 面 板 ， 并 输入 停止 动画 命令 “stop0; ， 如 图 4-20 所 示 。 
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图 4-20 设置 进入 网 站 图 层 


4.7.2 ”实战 : 制作 动画 导航 条 


导航 条 的 目的 是 让 网 站 的 层次 结构 以 一 种 有 条 理 的 方式 清晰 展示 .并 引导 用 户 毫 不 费力 地 找到 并 管 
理 信 息 , 让 用 户 在 浏览 网 站 过 程 中 不 至 迷失 。 为 了 让 网 站 信息 可 以 有 效 地 传递 给 用 户 ， 导航 一 定 要 简洁 、 
直观 、 明 确 。 本 例 将 使 用 Flash 制作 快速 链接 文字 和 Banner 文字 的 显示 动画 ， 主 要 练习 绘制 和 矩形、 创建 
补 间 形 状 、 创 建 补 间 动 画 、 创 建 遮 罩 动画 、 输 入 文本 、 设 置 文本 属性 ,如 图 4-21 所 示 。 






































图 4-21 制作 动画 导航 条 








STEP|01 设置 线条 图 层 。 新 建 “ 线 条 ”图 层 ， 在 第 100 帧 处 插入 关键 帧 ,使 用 【和 矩形 工具 】 在 舞 全 的 右 
侧 绘 制 一 个 深蓝 色 (#003366) 的 矩形 。 然 后 ， 在 第 115 帧 处 插入 关键 帧 ， 使 用 【任意 变形 工具 】 向 左 拉 
伸 该 矩形 ， 与 导航 条 的 左边 线 相对 齐 ， 并 在 这 两 关键 帧 之 间 创 建 补 间 形 状 动画 ， 如 图 4-22 所 示 。 




















图 4-22 设置 线条 图 层 


STEP|02 设置 进入 网 站 图 层 。 新 建 “快速 链接 ”图 层 .在 第 120 帧 处 插入 关键 帧 ， 使 用 【文本 工具 】 在 
舞台 的 右上 角 输入 文字 . 并 在 【属性 】 检 查 器 中 设置 其 【系列 】 为 “宋体 "、【 大 小 】 为 12、【 颜 色 】 为 “ 白 
色 ”( 丰 FFFFF)。 然 后 右 击 该 帧 ,创建 补 间 动 画 。 选 择 舞 台 上 的 文字 ,在 【属性 】 检 查 器 中 为 其 添加 【 投 


影 】 滤 镜 . 并 
并 在 【属性 】 























设置 【模糊 X】. 【模糊 Y】 和 【距离 】 均 为 “0 像素 "。 然 后 选择 第 125 帧 ， 向 下 移动 文字 ， 
检查 器 中 更 改 【 模 糊 X】、 【模糊 Y】 和 【距离 】 均 为 “5 像素 ， 如 图 4-23 所 示 。 





























STEP|03 设置 文字 图 层 。 新 建 “ 文 字 ” 图 层 . 在 第 140 帧 插入 关键 帧 . 在 导航 条 的 下 面 输 入 文本 “安全 - 稳 


定 -快速 “， 并 


在 第 140 帧 











在 【属性 】 检 查 器 中 设置 文本 样式 。 然 后 .为 文本 添加 “投影 ” 滤 镜 。 新 建 “ 遮 重 ” 图 层 . 
插入 关键 帧 ， 使 用 【和 拢 形 工具 】 在 文本 的 左 侧 绘制 一 个 矩形 ， 并 使 用 【选择 工具 】 调 整 矩形 
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的 右 下 角 ， 使 其 向 左 偏 移 。 然 后 ， 在 第 160 帧 处 插入 关键 帧 ， 使 用 【任意 变形 工具 】 更 改 图 形 的 形状 ， 
使 其 完全 遮挡 住 文字 ， 如 图 4-24 所 示 。 
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图 4-23 设置 进入 网 站 图 层 





图 4-24 设置 文字 图 层 














STEP|04 设置 ActionScript 图 层 。 右 击 第 140 帧 一 第 160 帧 之 间 的 任意 一 帧 ， 在 弹出 的 快捷 菜单 中 执行 
【创建 形状 补 间 】 命 令 ， 创 建 补 间 形 状 动画 。 右 击 该 图 层 ， 在 弹出 的 快捷 菜单 中 执行 【 遮 单 图】 命令 将 


其 转换 为 遮 罩 图 层 。 然 后 新 建 ActionScript 图 层 . 在 第 200 帧 处 插入 关键 帧 ,打开 【动作 】 面 板 ， 并 输入 
停止 播放 动画 代码 “stop0; ， 如 图 4-25 所 示 。 
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图 4-25 设置 ActionScript 图 层 








Dreamweaver 是 目前 最 流行 的 网 站 开发 工具 ， 它 具有 所 见 即 所 得 的 网 页 设计 功能 ， 同 时 又 可 以 编辑 
HTML 代码 。 对 于 代码 开发 人 员 ， 它 提供 了 强大 的 代码 编辑 器 ,支持 PHP、JSP、ASP、ASPNET 等 服务 
器 端 语 言 的 编辑 ， 对 于 网 页 设计 人 员 ， 它 的 可 视 化 设计 器 简单 易 用 ， 灵 活 而 又 强大 ， 主 要 用 于 对 站 点 、 
页 面 和 应 用 程序 进行 设计 、 编 码 和 开发 ， 还 在 界面 整合 和 易 用 性 方面 更 加 贴近 用 户 。 

本 章 主要 讲述 创建 与 管理 站 点 、Web 文件 操作 、 插 入 网 页 图 像 、 创 建 各 种 链接 和 综合 实战 。 通 过 
对 本 章 的 学 习 ， 了解 网 页 代码 软件 Dreamweaver 工具 的 使 用 方法 后 ， 就 已 经 可 以 开始 做 一 些 简单 的 网 
站 了 。 
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创建 与 管理 站 点 





站 点 是 管理 网 页 文档 的 场所 ，Dreamweaver 是 一 个 站 点 创建 和 管理 的 工具 .使 用 它 不 仅 可 以 创建 单 
独 的 文档 ， 还 可 以 创建 完整 的 站 点 。 站 点 主要 分 为 两 种 ， 一 种 是 基于 Web 发 布 系统 的 发 布 站 点 ; 另 一 种 
是 基于 网 页 设计 软件 的 本 地 调试 站 点 。 本 节 主 要 讲述 了 解 站 点 、 建 立 站 点 、 管 理 站 点 、 复 制 与 修改 站 点 。 
用 户 通过 对 本 节 的 学 习 ， 可 以 了 解 到 如 何 进行 站 点 的 编辑 。 


5.1.1 了 解 站 点 


Dreamweaver 站 点 提供 了 一 种 方法 ,使 用 户 可 以 组 织 和 管理 所 有 的 Web 文档 ， 将 站 点 上 传 到 Web 服 
务 器 ， 跟 踪 和 维护 站 点 的 链接 ,以 及 管理 和 共享 文件 。 站 点 由 三 个 部 分 (或 文件 夹 ) 组 成 ， 具 体 取决 于 
开发 环境 和 所 开发 的 Web 站 点 类 型 。 

1. 本 地 根 文件 夹 

存储 正在 处 理 的 文件 , Dreamweaver 将 此 文件 夹 称 为 “本 地 站 点 "。 此 文件 夹 通 常 位 于 本 地 计算 机 上 ， 
但 也 可 能 位 于 网 络 服务 器 上 。 

远程 文件 夹 

存储 用 于 测试 、 生 产 和 协作 等 用 途 的 文件 ，Dreamweaver 在 【文件 】 面 板 中 将 此 文件 夹 称 为 “远程 
站 点 "。 远 程 文件 夹 通常 位 于 运行 Web 服务 器 的 计算 机 上 ， 包含 用 户 从 Intemet 访问 的 文件 。 通 过 本 地 文 
件 夹 和 远程 文件 夹 的 结合 使 用 ， 用 户 可 以 在 本 地 硬盘 和 Web 服务 器 之 间 传 输 文件 ， 这 将 帮助 用 户 轻 松 地 
管理 Dreamweaver 站 点 中 的 文件 。 用 户 可 以 在 本 地 文件 夹 中 处 理 文件 ,希望 其 他 人 查看 时 ， 再 将 它们 发 
布 到 远程 文件 夹 。 

3. 测试 服务 器 文件 夹 

Dreamweaver 在 其 中 处 理 动态 页 的 文件 夹 ， 若 要 定义 Dreamweaver 站 点 ， 只 需 设置 一 个 本 地 文件 夹 ; 

若 要 向 Web 服务 器 传输 文件 或 开发 Web 应 用 程序 ， 还 必须 添加 远程 站 点 和 测试 服务 器 信息 。 


5.1.2 ”建立 站 点 


站 点 是 一 种 虚拟 文件 夹 ， 是 Dreamweaver 管理 本 地 网 页 及 各 种 素材 的 一 种 工具 。 使 用 Dreamweaver 
制作 网 页 ， 首 先 应 建立 站 点 。 

站 点 的 目录 可 以 是 本 地 计算 机 中 的 某 个 目录 ,也 可 以 是 远 端 服务 器 中 的 虚拟 文件 夹 。 建 立 站 
通过 Dreamweaver 自 带 的 新 建站 点 向 导 来 进行 ， 在 Dreamweaver 中 执行 【站 点 】〗】| 【新建 站点】 命令 . 
可 打开 【XNML 的 站 点 定义 为 】 对 话 框 . 进行 向 导 的 第 一 步 . 将 站 点 名 改 为 XNML. 并 设置 站 点 的 HITP 
地 址 为 “http://localhost/xnml/site” 。 
1. 设置 站 点 使 用 的 技术 

单 击 【下 一 步 ] 按钮 . 即 可 选择 站 点 使 用 的 服务 器 技术 . 例如 . 选择 ASP VBScript 技术 。Dreamweaver 
站 点 共 支 持 6 种 常见 的 服务 器 技术 ， 如 表 5-1 所 示 。 
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ASP JavaScript 由 JavaScript 编写 的 ASP 程序 

ASP VBScript 由 VBScript 编写 的 ASP 程序 

ASP.net C# 由 C# 编 写 的 ASP.NET 程序 

ASP.net VB 由 VB 编写 的 ASPNET 程序 

ColdFusion 由 CFML 或 Java 编写 的 ColdFusion 程序 






以 MySQL 为 数据 库 的 PHP 程序 





PHP MySQL 


2. 设置 站 点 及 文件 位 置 

单 击 【 下 一 步 】 按 钮 ， 即 可 设置 站 点 文件 的 位 置 。Dreamweaver 会 自动 检测 本 地 计算 机 是 否 安装 有 
IIS (Internet Information Server， 微 软 开 发 的 用 于 Windows 系统 发 布 网 页 的 系统 )。 如 果 本 地 计算 机 安装 
有 IIS， 则 Dreamweaver 将 允许 用 户 以 本 地 计算 机 作为 测试 服务 器 。 在 设置 完成 站 点 文件 的 目录 后 , 即 可 
单 击 【 下 一 步 】 按 钮 设置 浏览 本 地 站 点 所 使 用 的 URL， 并 单 击 【测试 URL】 按 钮 ， 测 试 本 地 站 点 的 链 
接 是 否 有 效 。 
3. 远程 服务 器 设置 

Dreamweaver 人 允许 设置 远程 服务 器 的 种 类 。 单 击 【 下 一 步 】 按 钮 后 ， 即 可 选择 【是 的 ， 我 要 使 用 远 
程 服务 器 】， 并 进入 下 一 步 设置 ， 在 下 拉 列 表 中 选择 远程 服务 器 种 类 。 
4. 存 回 和 取出 设置 

存 回 和 取出 设置 的 作用 是 防止 多 人 同时 编辑 一 个 网 页 文档 ， 因 而 造成 重复 覆盖 的 问题 。 用 户 可 根据 
实际 情况 选择 是 否 启用 存 回 和 取出 ,完成 站 点 定义 。Dreamweaver 支持 5 种 远程 服务 器 方式 , 用 户 可 根据 






































实际 情况 进行 选择 ， 如 表 5-2 所 示 。 


表 5-2 5 种 远程 服务 器 方式 
远程 服务 器 方式 说 
文件 传输 协议 ， 互 联网 中 最 常见 的 传输 协议 

本 地 计算 机 或 本 地 局 域 网 内 计算 机 作为 远 端 服务 器 的 方式 

Web-based Distributed Authoring and Versioning ,Web 分 布 式 创作 与 版 本 管理 ， 
是 一 种 基于 HTTP 1.1 的 通信 协议 ， 支 持 以 HTTP 方式 发 布 数 据 





WebDAV 


Remote Data Services， 远 程 数 据 服务 ，Windows 使 用 的 远程 通信 方式 


有 SourceSafe 是 微软 公司 的 Visual Studio 系列 编程 工具 中 的 一 种 ， 主 要 用 于 软 
Microsoft Visual SourceSafe(R) 件 或 Web 程序 在 开发 过 程 中 的 版 本 管理 


(3) 本 地 站 点 : 与 远程 站 点 的 文件 对 应 的 本 地 磁盘 上 的 文件 .创建 者 在 本 地 磁盘 上 编辑 文件 ， 然 后 
上 传 到 远程 站 点 。 
在 开始 制作 网 页 之 前 .最 好 先 定义 一 个 站 点 ,这 是 为 了 更 好 地 利用 站 点 对 文件 进行 管理 , 也 可 以 尽 
可 能 地 减少 错误 ， 如 路 径 出 错 、 链 接 出 错 。 新 手 做 网 页 条 理性 、 结 构 性 需要 加 强 ， 往往 这 一 个 文件 放 这 
里 、 另 一 个 文件 放 那 里 . 或 者 所 有 文件 都 放 在 同一 文件 夹 内 .这样 显 得 很 乱 。 建 议 用 一 个 文件 夹 存放 网 
站 的 所 有 文件 . 再 在 文件 夹 内 建立 几 个 子 文件 夹 . 将 文件 分 类 . 如 图 片 文 件 放 在 images 文件 夹 内 、 HTML 
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文件 放 在 根 目录 下 。 如 果 站 点 比较 大 ， 文 件 比较 多 ， 可 以 先 按 栏目 分 类 ， 在 栏目 里 再 分 类 。 
5.1.3 ”管理 站 点 


管理 站 点 】 对 话 框 是 进入 许多 Dreamweaver 站 点 功能 的 通路 。 在 这 个 对 话 框 中 ， 可 以 启动 创建 新 站 
点 、 编 辑 现 有 站 点 、 复 制 站 点 、 删 除 站 点 或 者 导入 或 导出 站 点 设置 的 过 程 。 例 如 ,执行 【站 点 】| 【管理 
站 点 】 命 令 ， 即 可 在 对 话 框 中 显示 一 个 站 点 列表 。 但 是 ,如 果 还 未 创建 任何 站 点 ,站 点 列表 将 是 空白 的 ， 
如 图 5-1 所 示 。 










































































图 5-1 【管理 站 点 】〗 对 话 框 


在 该 对 话 框 中 ， 用 户 可 以 执行 下 列 操作 。 
1. 新 建站 点 

单 击 【新 建站 点 〗】 按 钮 创建 新 的 站 点 ， 然 后 在 【站 点 设置 】 对 话 框 中 指定 新 站 点 的 名 称 和 位 置 。 
2. 导入 站 点 

单 击 【 导 入 站 点 】 按 钮 导入 站 点 ， 导 入 功能 仅 导 入 以 前 从 Dreamweaver 导出 的 站 点 设置 ， 它 不 会 导 
入 站 点 文件 以 创建 新 的 Dreamweaver 站 点 。 
3. 新 建 Business Catalyst 站 点 

单 击 【新 建 Business Catalyst 站 点 】 按 钮 创建 新 的 Business Catalyst 站 点 。 
4. 导入 Business Catalyst 站 点 

单 击 【 导 入 Business Catalyst 站 点 】 按 钮 导入 现 有 的 Business Catalyst 站 点 。 对 于 现 有 站 点 ， 用 户 可 
以 进行 如 下 操作 。 

(1) 【删除 】 按 钮 

从 Dreamweaver 站 点 列表 中 删除 选 定 的 站 点 及 其 所 有 设置 信息 : 这 并 不 会 删除 实际 站 点 文件 。 

若 要 从 Dreamweaver 中 删除 站 点 ， 在 站 点 列表 中 选择 该 站 点 ， 然 后 单 击 【删除 】 按 钮 图 标 。 而 当 执 
行 该 操作 后 ， 则 无 法 进行 撤销 。 

(2) 【编辑 】 按 钮 

该 按钮 可 以 让 用 户 编辑 用 户 名 、 口 令 等 信息 ， 以 及 现 有 Dreamweaver 站 点 的 服务 器 信息 。 在 站 点 列 
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(3) 【复制 】 按 钮 

单 击 该 按钮 ， 即 可 创建 现 有 站 点 的 副本 。 例 如 ， 在 站 点 列表 中 选择 该 站 点 ,然后 单 击 【 复 制 】 按 钮 
图 标 。 复 制 的 站 点 将 会 显示 在 站 点 列表 中 .站 点 名 称 后 面 会 附加 copy 字样 。 若 要 更 改 复制 站 点 的 名 称 ， 
可 以 选中 该 站 点 ， 然 后 单 击 【 编 辑 】 按 钮 ， 即 可 更 改 站 点 的 名 称 。 

(4)【 导 出 】 按 钮 

在 导出 站 点 内 容 时 .用 户 可 以 将 选 定 站 点 的 设置 导出 为 XML 文件 (*.ste)。 


5.1.4 复制 与 修改 站 点 


执行 【站 点 】〗】| 【管理 站 点 】 命 令 ， 弹 出 【管理 站 点 】 对 话 框 ,在 对 话 框 中 选中 要 复制 的 站 点 ， 单 击 
【复制 】 按 钮 即 可 将 该 站 点 复制 。 新 复制 出 的 站 点 名 称 会 出 现在 【管理 站 点 】 对 话 框 的 站 点 列表 中 。 单 击 
【完成 】 按 钮 ， 完 成 对 站 点 的 复制 。 执 行 【站 点 】| 【管理 站 点 】 命 令 ， 弹 出 【管理 站 点 】 对 话 框 ， 在 对 话 
框 中 单 击 【编辑 】 按 钮 ， 即 可 弹出 【站 点 设置 对 象 实例 素材 】 对 话 框 ， 在 【高 级 设置 】 选 项 卡 中 可 以 编 
辑 站 点 的 信息 ， 如 图 5-2 所 示 。 
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moayer 站 点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。 
服务 器 
| 


您 可 以 在 比 处 为 Dreamweaver 站 点 选择 本 地 文件 夹 和 名 称 。 
36 
本 好 站 点 文件 赤 : [C:Weers\sY Desctop 断 建 文件 来、 所 
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图 5-2 复制 与 修改 站 点 


国 2 | Web 文件 操作 


在 【文件 】 面 板 中 ， 用户 可 以 打开 本 地 文件 夹 中 的 文件 、 对 文件 进行 更 名 .还 可 以 添加 或 删除 文件 。 
Dreamweaver 不 仅 可 以 在 文本 的 字符 与 行 之 间 插 入 额外 的 空格 . 还 能 插入 特殊 字符 和 水 平 线 等 . 通过 直接 
输入 、 复 制 和 粘贴 的 方法 将 文本 插入 到 文档 中 。 本 节 主 要 讲述 了 解 文件 夹 的 结构 、 文 件 面板 、 删 除 文件 
或 文件 夹 、 复 制 与 修改 站 点 。 用 户 通过 对 本 节 的 学 习 ， 可 以 了 解 到 如 何 进行 站 点 的 编辑 。 


5.2.1 了 解 文件 夹 的 结构 


如 果 用 户 希 望 使 用 Dreamweaver 连接 某 个 远程 文件 夹 ， 可 在 【站 点 设置 对 象 】 对 话 框 的 【服务 器 】 
类 别 中 指定 该 远程 文件 夹 。 




















:; 网 页 设计 与 网 站 建设 自学 经 典 :::: 


3 第 5 章 网 页 代码 软件 Dreamweaver 


.0 





指定 的 远程 文件 夹 (也 称 为 “主机 目录 ”) 应 该 对 应 于 Dreamweaver 站 点 的 本 地 根 文件 夹 。 与 本 地 
文件 夹 一 样 ， 远 程 文件 夹 可 以 具有 任意 名 称 ， 但 Internet 服务 提供 商 (ISP) 通常 会 将 各 个 用 户 账户 的 项 
级 远程 文件 夹 命名 为 public_ html、pub_html 或 者 与 此 类 似 的 其 他 名 称 。 

如 果 用 户 亲 自 管理 自己 的 远程 服务 器 .并且 可 以 将 远程 文件 夹 命名 为 所 需 的 任意 名 称 ， 则 最 好 使 本 
地 根 文件 夹 与 远程 文件 夹 同名 。 

例如 , 图 5-3 中 左 侧 为 一 个 本 地 根 文件 夹 示例 . 右 侧 为 一 个 远程 文件 夹 示 例 。 本 地 计算 机 上 的 本 地 根 
文件 夹 直 接 映 射 到 Web 服务 器 上 的 远程 文件 夹 ， 而 不 是 映射 到 远程 文件 夹 的 任何 子 文件 夹 或 目录 结构 中 
位 于 远程 文件 夹 之 上 的 文件 夹 ， 如 图 5-3 所 示 。 

























登录 目录 
(在 这 种 情况 下 不 应 为 
远程 文件 夹 ) 





图 5-3 本 地 根 文件 天 


远程 文件 夹 应 始终 与 本 地 根 文件 夹具 有 相同 的 目录 结构 。 如 果 远 程 文件 夹 的 结构 与 本 地 根 文件 夹 的 
结构 不 匹配 ,会 将 文件 上 传 到 错误 的 位 置 ， 站 点 访问 者 可 能 无 法 看 到 这 些 文件 。 


5.2.2 文件 面板 


Dreamweaver 包含 【文件 】 面 板 ， 可 帮助 用 户 管理 文件 ， 并 在 本 地 和 远程 服务 器 之 间 传 输 文件 。 当 
用 户 在 本 地 和 远程 站 点 之 间 传 输 文件 时 ,会 在 这 两 种 站 点 之 间 维 持平 行 的 文件 和 文件 夹 结构 。 用 户 可 以 
使 用 【文件 】 面 板 查看 文件 和 文件 夹 (无 论 这 些 文件 和 文件 夹 是 否 与 Dreamweaver 站 点 相关 联 )， 以 及 执 
行 标准 文件 维护 操作 (如 打开 和 移动 文件 ) 。 用 户 可 以 根据 需要 移动 【文件 】 面 板 ， 并 为 该 面板 设置 首选 
参数 。 例 如 .设置 访问 站 点 、 服 务 器 和 本 地 驱动 器 .查看 文件 和 文件 夹 等 ， 如 图 5-4 所 示 。 
SI 
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图 5-4 【文件 】 面 板 


1. 站 点 弹出 菜单 

用 于 使 用 户 可 以 选择 站 点 并 显示 该 站 点 的 文件 ， 还 可 以 使 用 【站 点 】 菜 单 访问 本 地 磁盘 上 的 全 部 
文件 。 
2. 连接 / 断 开 

用 于 连接 到 远程 站 点 .或 断 开 与 远程 站 点 的 连接 。 黑 认 情况 下 ， 如 果 已 空闲 30 分 钟 以 上 ， 则 将 断 











网 页 设计 与 网 站 建设 自学 经 典 





开 与 远程 站 点 的 连接 ( 仅 限 FTP) 。 
3. 刷新 

用 于 刷新 本 地 和 远程 目录 列表 。 如 果 用 户 已 取消 选择 【站 点 定义 】 对 话 框 中 的 【自动 刷新 本 地 文件 
列表 】 或 【自动 刷新 远程 文件 列表 】， 则 可 以 使 用 此 按钮 手动 刷新 目录 列表 。 
4. 文件 视图 

在 【文件 】 面 板 的 窗 格 中 显示 远程 和 本 地 站 点 的 文件 结构 。[【 文 件 视图 】 也 称 为 【站 点 文件 视 
5. 上 传 文件 

用 于 将 选 定 的 文件 从 本 地 站 点 复制 到 远程 站 点 。 
6. 取出 文件 

用 于 将 文件 的 副本 从 远程 服务 器 传输 到 本 地 站 点 ， 并 且 在 服务 器 上 将 该 文件 标记 为 取出 。 如 果 对 当 
前 站 点 禁用 【站 点 定义 】 对 话 框 中 的 【启用 存 回 和 取出 】 选 项 ， 则 此 选项 不 可 用 。 
7. 存 回 文件 

用 于 将 本 地 文件 的 副本 传输 到 远程 服务 器 ， 并 且 使 该 文件 可 供 他 人 编辑 。 本 地 文件 变 为 只 读 。 如 果 
对 当前 站 点 禁用 了 【站 点 定义 】 对 话 框 中 的 【启用 存 回 和 取出 】 选 项 ， 则 此 选项 不 可 用 。 
8. 同步 

可 以 同步 本 地 和 远程 文件 夹 之 间 的 文件 。 
9. 扩展 /折叠 按钮 
展开 或 折叠 【文件 】 面 板 以 显示 一 个 或 两 个 窗 格 。 


5.2.3 ”删除 文件 或 文件 夹 


在 【文件 】 面 板 (可 执行 【窗口 】| 【文件 】 命 令 打 开 ) 中 ， 在 【站 点 弹出 】 菜 单 (其 中 显示 当前 站 
点 、 服 务 器 或 驱动 器 ) 中 选择 站 点 、 服 务 器 或 驱动 器 。 

然后 ,在 显示 的 站 点 文件 结构 列表 中 双击 需要 打开 的 文件 ， 文 件 将 在 Dreamweaver 中 打开 。 也 可 以 
右 击 需要 打开 的 文件 ， 并 执行 【打开 】 命 令 。 

在 【文件 】 面 板 中 ， 用 户 可 以 右 击 列表 中 的 任意 文件 或 者 文件 夹 ， 并 执行 【新 建文 件 】 命 令 ， 即 可 
创建 一 个 HIML 文件 .并 修改 其 名 称 。 

当然 ,用户 也 可 以 右 击 列表 任务 位 置 ， 并 执行 【新 建文 件 夹 】 命 令 创 建 一 个 文件 夹 ， 并 修改 文件 来 
名 称 。 

右 击 所 要 删除 的 文件 或 文件 夹 ， 并 执行 【编辑 】| 【删除 】 命 令 。 然 后 ,在 弹出 的 对 话 框 中 单 击 【 是 】 
按钮 。 用 户 也 可 以 直接 选择 需要 删除 的 文件 或 者 文件 夹 ， 并 按 Delete 键 直接 删除 。 


5.2.4 文件 的 复制 和 粘贴 


选择 要 重 命名 的 文件 或 文件 夹 ， 右 击 该 文件 的 图 标 . 执行 【编辑 】|【 重 命名 】 命 令 ， 即 可 更 改 文件 
名 称 。 或 者 在 选择 文件 后 ， 稍 停 片刻 ， 然 后 再 次 单 击 ， 修 改 文件 名 即 可 。 

右 击 需要 复制 的 文件 或 文件 来， 并 执行 【编辑 】|【 拷 贝 】 命 令 。 然 后 ， 右 击 任意 文件 或 者 文件 夹 , 
并 执行 【编辑 】|【 粘 贴 】 命 令 ， 即 可 将 文件 或 者 文件 夹 移动 到 列表 最 下 面 。 并 且 ， 在 所 粘贴 的 文件 或 者 
文件 夹 名 称 后 面 将 显示 “拷贝 ”内 容 。 

右 击 任 意 文件 或 文件 夹 ， 然 后 执行 【刷新 〗 命 令 . 或 者 单 击 【 文 件 】 面 板 工具 栏 上 的 【刷新 】 按 钮 
可 以 进行 刷新 操作 。 在 刷新 【文件 】 面 板 中 的 文件 列表 时 .列表 中 的 文件 将 以 文件 名 的 第 1 个 字母 进行 
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重新 排列 ， 而 文件 夹 则 排列 在 文件 的 前 面 。 
5.2.5” 存 回 和 取出 文件 


用 户 除 了 可 对 本 地 站 点 进行 操作 以 外 .还 可 以 对 远程 站 点 文件 进行 操作 。Dreamweaver 为 用 户 提供 
协作 工作 的 环境 ， 即 存 回 和 取出 文件 。 如 果 要 对 远程 服务 器 中 的 站 点 文件 进行 存 回 和 取出 操作 ， 则 必须 
先 将 本 地 站 点 与 远程 服务 器 相关 联 ， 然 后 才能 使 用 存 回 /取出 系统 。 

例如 ,执行 【站 点 】| 【管理 站 点 】 命 令 . 选择 一 个 站 点 .并 单 击 【 导 入 站 点 】 按 钮 。 然 后 ,在 左 侧 
的 【分 类 】 列 表 中 选择 【服务 器 】 选 项 ， 并 在 列表 中 查看 已 经 创建 的 服务 器 列表 。 如 果 没 有 连接 服务 器 . 
则 列表 中 将 显示 空白 。 此 时 ， 可 以 单 击 【 添 加 新 服务 器 】 按 钮 ， 并 添加 服务 器 。 

在 弹出 的 对 话 框 中 ， 用户 可 以 输入 【服务 器 名 称 ]、[【FTP 地 址 】、【 用 户 名 】、 【密码 】 等 内 容 ， 单 击 
【保存 】 按 钮 。 另 外 ， 用 户 还 可 以 单 击 【 高 级 】 按 钮 ， 并 在 显示 的 面板 中 设置 FTP 远程 连接 服务 的 相关 
参数 。 在 该 对 话 框 的 面板 中 . 用户 可 以 设置 “远程 服务 器 ”相关 内 容 ， 还 可 以 设置 “测试 服务 器 ”相关 
内 容 。 其 中 ， 当 用 户 启用 【启用 文件 取出 功能 】〗】 复 选 框 后 ， 即 可 激活 下 面 的 选项 及 文本 框 ， 其 含义 如 下 。 
1. 打开 文件 之 前 取出 

当 用 户 打开 该 站 点 文件 时 ， 即 启动 取出 功能 ,并 将 远程 服务 器 连接 的 网 站 内 容 取 回 到 本 地 文本 夹 中 。 
2. 取出 名 称 

取出 名 称 显示 在 【文件 】 面 板 中 已 取出 文件 的 旁边 ; 这 使 开发 人 员 在 其 需要 的 文件 已 被 取出 时 可 以 
和 相关 的 人 员 联 系 。 

3. 电子 邮件 地 址 

如 果 用 户 取出 文件 时 输入 了 电子 邮件 地 址 ， 则 姓名 会 以 链接 ( 蓝 色 并 且 带 下 画 线 ) 形式 出 现在 【 文 
件 】 面 板 中 的 该 文件 旁边 。 如 果 开 发 人 员 单 击 该 链接 则 其 默认 电子 邮件 程序 将 打开 一 个 新 邮件 ， 该 邮 
件 使 用 该 用 户 的 电子 邮件 地 址 以 及 与 该 文件 和 站 点 名 称 对 应 的 主题 。 


5.2.6 ”添加 普通 文本 及 特殊 字符 


文本 是 基本 的 信息 载体 ， 是 网 页 中 的 基本 元 素 。 浏 览 网 页 时 ， 获 取信 息 最 直接 、 最 直观 的 方式 就 是 
通过 文本 。 在 Dreamweaver 中 添加 文本 的 方法 非常 简单 ， 打 开 网 页 文档 ， 将 光标 置 于 要 输入 文本 的 位 置 
输入 文本 ， 如 图 5-5 所 示 。 
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制作 网 页 时 ， 有 时 要 输入 一 些 键盘 上 没有 的 特殊 字符 ， 如 日 元 符号 、 注 册 商标 等 ， 这 就 需要 使 用 
Dreamweaver 的 特殊 字符 功能 。 打 开 网 页 文档 ,将 光标 置 于 要 插入 特殊 字符 的 位 置 . 执行 【插入 】|【 字 
符 】| 【版 权 】 命 令 ， 选 择 命令 后 就 可 插入 特殊 字符 .效果 如 图 5-6 所 示 。 

















Copyright © 2007-2009 www.xxskybluexx.com.cn All Rights Reserved 
图 5-6 ”特殊 字符 的 添加 效果 


在 做 网 页 的 时 候 ， 有 时 需要 输入 空格 .但 有 时 却 无 法 输入 。 导 致 无 法 正确 输入 空格 的 原因 可 能 是 输 
入 法 错误 ， 只 有 正确 使 用 输入 法 才能 够 解决 这 个 问题 。 在 字符 之 间 添 加 空格 的 方法 非常 简单 ， 打开 网 页 
文档 ， 将 光标 置 于 要 添加 空格 的 位 置 ， 切 换 到 拆 分 视图 ,输入 代码 “&nbsp;”。 

很 多 网 页 在 其 下 方 会 显示 一 条 水 平 线 ， 以 分 割 网 页 主题 内 容 和 底 端的 版 权 声明 等 ， 根 据 设计 需要 ， 
也 可 以 在 网 页 任意 位 置 添加 水 平 线 .达到 区 分 网 页 中 不 同 内 容 的 目的 。 打 开 网 页 文档 ,将 光标 置 于 要 插 
入 水 平 线 的 位 置 。 执 行 【 插 入 】〗| 【水平 线 】 命 令 ， 插 入 水 平 线 。 列 表 有 项 目 列表 和 编号 列表 两 种 ,列表 
常 应 用 在 条 款 或 列举 等 类 型 的 文件 中 ， 用 列表 的 方式 进行 罗列 可 使 内 容 更 直观 。 项 目 列表 又 称 无 序列 表 . 
这 种 列表 的 项 目 之 间 没 有 先后 顺序 。 项 目 列表 前 面 一 般 用 项 目 符号 作为 前 导 字符 。 
打开 网 页 文档 ， 将 光标 置 于 要 创建 项 目 列表 的 位 置 。 执 行 【结构 】|【 项 目 列表 】 命 令 ， 即 可 创建 项 
目 列表 。 编 号 列表 又 称 有 序列 表 ， 其 文本 前 面 通常 有 数字 前 导 字 符 ， 其 中 的 数字 可 以 是 英文 字母 、 阿 拉 
伯 数 字 或 罗马 数字 等 符号 。 将 光标 置 于 要 创建 编号 列表 的 位 置 . 执行 【结构 】|【 列 表 】|【 编 号 列表 】 命 
令 ， 即 可 创建 编号 列表 。 
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在 Dreamweaver 中 ， 用 户 可 以 在 【设计 】 视 图 或 【代码 】 视 图 中 将 图 像 插 入 网 页 文档 。 在 设计 包含 
图 像 的 网 页 时 ， Dreamweaver 会 自动 在 HTML 源 代码 中 生成 对 图 像 文件 的 引用 。 为 了 确保 引用 的 正确 性 ， 
该 图 像 文件 必须 位 于 当前 站 点 中 。 如 果 图 像 文件 不 在 站 点 中 , Dreamweaver 会 询问 是 否 要 将 文件 复制 到 当 
前 站 点 中 。 


5.3.1 在 【设计 】 视 图 中 插入 图 片 


在 Dreamweaver 的 【设计 】 视 图 中 直接 为 网 页 插入 图 片 是 一 种 比较 快捷 的 方法 。 用 户 在 文档 窗口 中 
找到 网 页 上 需要 插入 图 片 的 位 置 后 ,选择 【插入 】| 【图像 】 命 令 ， 然 后 在 打开 的 【选择 图 像 源 文件 】 对 
话 框 中 选中 计算 机 中 的 图 片 文件 ， 并 单 击 【 确 定 】 按 钮 。 

当 用 户 在 【选择 图 像 源 文 件 】 对话 框 中 选中 一 个 图 片 文件 后 ， 该 对 话 框 右 侧 的 【图 像 预 览 】 区 域 中 
将 显示 图 片 的 预览 效果 以 及 选中 图 片 的 尺寸 、 格 式 和 大 小 信息 。 单 击 【 确 定 】 按 钮 后 , Dreamweaver 将 打 
开 【 图 像 标签 辅助 功能 属性 】 对 话 框 提示 用 户 输 入 图 像 替 换文 本 。 替 换文 本 是 当 鼠 标 指针 位 于 网 页 图 像 
上 显示 的 文字 ， 当 图 片 无 法 在 网 页 中 显示 时 . 将 显示 替换 文本 内 容 。 
另外 . 若 用 户 在 网 页 中 插入 的 图 片 位 于 站 点 的 图 片 文件 夹 中 ,那么 在 插入 图 片 时 ，Dreamweaver 将 
打开 对 话 框 ， 提 示 用 户 是 否 将 图 片 复制 到 本 地 站 点 的 根 目录 文件 夹 中 。 
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5.3.2 ”通过 【资源 】 面 板 插入 图 片 


在 Dreamweaver 中 ， 用 户 可 以 选择 【窗口 】| 【资源 】 命 令 . 使 用 【资源 】 面 板 在 网 页 中 插入 图 片 。 
【资源 】 面 板 中 显示 本 地 站 点 所 包含 的 GIF、JPEG 和 PNG 文件 ,选中 某 个 图 片 文件 后 ,面板 的 上 方 将 显 




















示 图 片 的 缩 略 图 ， 将 图 片 拖 动 至 网 页 中 适当 的 位 置 ， 即 可 插入 图 片 。 
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用 户 在 使 用 【资源 】 面 板 插入 网 页 图 像 之 前 ， 需 要 对 站 点 的 内 容 进行 整理 ， 在 【资源 】 面 板 中 单 击 





【刷新 站 点 列表 】 按 钮 |@ 











径 等 。 


5.3.3 ”在 网 页 的 源 代码 中 插入 图 片 
在 Dreamweaver 设计 视图 中 进行 的 任何 设置 都 会 在 代码 视图 中 以 代码 的 形式 显示 ， 对 代码 视图 的 任 


何 编辑 也 都 会 在 设计 视图 中 表现 。 将 视图 切换 至 Dreamweaver 代码 视图 ， 通常 情况 下 会 另 起 一 行 编写 图 
后 在 后 面 输 入 “img ， 在 输入 图 片 的 代码 标签 时 ， 软 件 会 提供 常用 的 标签 选 
如 下 所 示 。 


片 代码 ,首先 输入 “< ， 


项 。<img> 标 签 的 常用 属 必 


src: 图 像 的 源 文件 。 








alt， 图 像 无 法 显示 时 的 替换 文本 。 


name: 图 像 的 名 称 。 


width/height， 图像 的 宽度 /高 度 。 
在 【选择 文件 】 对 话 框 中 单 击 【 确 定 】 按 钮 后 ， 即 可 将 选中 图 像 文件 的 URL 添加 至 <img> 标 签 中 。 
随后 ,使 用 键盘 输入 “/>”， 


<img src="p3.png"/> 


完成 的 图 像 插入 代码 如 下 : 





， 可 以 检查 当前 站 点 并 创建 所 有 图 像 的 列表 . 包括 尺寸 、 文 件 类 型 和 完整 路 








此 时 ， 切换 至 Dreamweaver 设计 视图 即 可 查看 插入 的 图 片 效果 。 若 用 户 需 要 为 网 页 中 插入 的 图 片 添 
加 文本 ， 可 以 在 代码 视图 中 的 图 像 插 入 代码 后 按 空格 键 . 在 弹出 的 列表 框 中 选中 alt 属性 并 按 回 车 键 ， 将 


其 添加 至 <img> 标 签 中 。 在 【代码 】 视 图 





看 网 页 中 插入 图 像 的 效果 。 


5.3.4 ”使 用 图 像 热 区 








用 户 在 浏览 网 页 时 .将 鼠标 指针 放 在 一 个 图 片上 
鼠标 指针 出 现 像 是 放置 在 按钮 上 的 状态 。 此 时 ， 若 单 击 
图 片上 的 区 域 就 会 打开 相应 的 链接 ， 这 就 是 图 像 热 区 的 





设置 效果 。 图 像 热 区 的 设置 位 于 图 








像 【 属 性 】 面 板 的 左 


下 角 ，Dreamweaver 将 其 称 为 “地 图 " .包括 算 形 热 区 、 


圆 形 热 区 和 多 边 形 热 区 三 种 样式 。 


1. 绘制 矩形 热 区 














h 完 成 插入 网 页 图 像 的 代码 编写 后 . 按 F12 键 即 可 在 浏览 器 中 查 









































在 Dreamweaver 中 选中 网 页 上 的 某 张 图 片 后 ， 使 用 
【属性 】 面 板 上 的 【 算 形 热 区 工具 】 按 钮 ， 可 以 在 图 片上 
绘制 如 图 5-7 所 示 的 矩形 热 区 。 和 矩形 热 区 的 4 个 角 上 有 控 























图 5-7 绘制 矩形 热 区 
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网 页 设计 与 网 站 建设 自学 经 典 : 








网 页 设计 与 网 学 经 典 
制 点 ， 对 控制 点 进行 拖 动 可 以 调整 热 区 的 大 小 (在 调整 矩形 热 区 之 前 应 在 【属性 】 面 板 中 单 击 【 指 针 热点 


工具 】 按 钮 器 ， 该 按钮 的 功能 与 选择 工具 一 样 )， 如 图 5-7 所 示 。 
2. 绘制 圆 形 热 区 
在 【属性 】 面 板 中 使 用 【 圆 形 热 点 工具 】 按 钮 可 以 在 图 片上 绘制 如 图 5-8 所 示 的 圆 形 热点 区 域 . 该 热 
点 区 域 上 有 4 个 控制 点 , 对 控制 点 进行 拖 动 调整 时 无 论 怎 样 拖 动 . 绘制 出 的 热 区 都 是 一 个 圆 形 ， 如 图 5-8 
所 示 。 
3. 绘制 多 边 形 热 区 
在 【属性 】 面 板 中 使 用 【多 边 形 热点 工具 】 按 钮 可 以 在 网 页 图 像 上 绘制 如 图 5-9 所 示 的 多 边 形 区 域 。 
多 边 形 热 区 相 比 矩形 热 区 和 圆 形 热 区 更 加 自由 . 用户 在 使 用 【指针 热点 工具 】 按 钮 四 | 调整 多 边 形 热 区 时 






















































































可 以 单独 调整 热 区 周围 的 控制 点 ， 直 到 热 区 的 大 小 符合 网 页 设计 的 需求 为 止 。 
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图 5-8 绘制 圆 形 热 区 图 5-9 绘制 多 边 形 热 区 


HL 是 于 创建 各 种 链接 


前 面 讲述 了 超级 链接 的 基本 概念 和 创建 超级 链接 的 路 径 ， 通 过 前 面 的 学 习 我 们 已 经 对 超级 链接 有 了 
大 概 的 了 解 ， 下面 将 讲述 各 种 类 型 超 链接 的 创建 。 本 节 主 要 讲述 相对 路 径 和 绝对 路 径 、 创 建 图 像 热点 链 
接 、 创 建 E-mail 链接 、 创 建 脚本 链接 、 创 建 下 载 文 件 链接 。 用 户 通过 对 本 节 的 学 习 ， 可 以 了 解 到 如 何 创 
建 各 种 链接 。 


5.4.1 相对 路 径 和 绝对 路 径 


链接 是 从 一 个 网 页 或 文件 到 另 一 个 网 页 或 文件 的 访问 路 径 ， 不 但 可 以 指向 图 像 或 多 媒体 文件 ， 还 可 
以 指向 电子 邮件 地 址 或 程序 等 。 当 网 站 访问 者 单 击 链接 时 . 将 根据 目标 的 类 型 执行 相应 的 操作 . 即 在 Web 
浏览 器 中 打开 或 运行 。 

要 正确 地 创建 链接 ， 就 必须 了 解 链接 与 被 链接 文档 之 间 的 路 径 ， 每 一 个 网 页 都 有 一 个 唯一 的 地 址 ， 
称 为 统一 资源 定位 符 (URL)。 网 页 中 的 超级 链接 按照 链接 路 径 的 不 同 ， 可 以 分 为 相对 路 径 和 绝对 路 径 两 
种 链接 形式 。 
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相对 路 径 对 于 大 多 数 的 本 地 链接 来 说 ,是 最 适用 的 路 径 。 当 前 文档 与 所 链接 的 文档 处 于 同一 文件 夹 
内 时 ,文档 相对 路 径 特 别 有 用 。 文 档 相 对 路 径 还 可 用 来 链接 到 其 他 文件 夹 中 的 文档 ,方法 是 利用 文件 夹 
层次 结构 ， 指 定 从 当前 文档 到 所 链接 的 文档 的 路 径 , 文档 相对 路 径 省 略 掉 对 于 当前 文档 和 所 链接 的 文档 
都 相同 的 绝对 URL 部 分 ， 而 只 提供 不 同 的 路 径 部 分 。 

使 用 相对 路 径 的 好 处 在 于 ， 可 以 将 整个 网 站 移植 到 另 一 个 地 址 的 网 站 中 ， 而 不 需要 修改 文档 中 的 链 
接 路 径 。 

绝对 路 径 是 包括 服务 器 规范 在 内 的 完全 路 径 ， 绝 对 路 径 不 管 源 文件 在 什么 位 置 ， 都 可 以 非常 精确 地 
找到 ,除非 目标 文档 的 位 置 发 生变 化 ， 否 则 链接 不 会 失败 。 采 用 绝对 路 径 的 好 处 是 ， 它 同 链接 的 源 端点 
无 关 ， 只 要 网 站 的 地 址 不 变 ， 则 无 论文 档 在 站 点 中 如 何 移动 都 可 以 正常 实现 跳 转 而 不 会 发 生 错 误 。 另 
外 ,如 果 希 望 链接 到 其 他 站 点 上 的 文件 ， 就 必须 用 绝对 路 径 。 

采用 绝对 路 径 的 缺点 在 于 ， 这 种 方式 的 链接 不 利于 测试 .如 果 在 站 点 中 使 用 绝对 地 址 ， 要 想 测试 链 
接 是 否 有 效 ， 就 必须 在 Internet 服务 器 端 对 链接 进行 测试 ， 它 的 另 一 个 缺点 是 不 利于 站 点 的 移植 。 


5.4.2 ”创建 图 像 热点 链接 


创建 过 程 中 ， 首 先 选 中 图 像 ， 然 后 在 【属性 】 面 板 中 选择 热点 工具 在 图 像 上 绘制 热 区 ， 创 建 图 像 热 
点 链接 后 ， 当 单 击 图 像 “ 网 站 首页 ”时 ,效果 如 图 5-10 所 示 , 会 出 现 一 个 首页 。 
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图 5-10 图 像 热点 链接 效果 


打开 网 页 文档 ,选中 创建 热点 链接 的 图 像 。 执 行 【 窗 口 】|【 属 性】 命令 . 打开 【属性 】 面 板 , 在 【 属 
性 】 面 板 中 单 击 【矩形 热点 工具 】 按 钮 , 选择 【和 矩形 热点 工具 】。 打 开 网 页 文档 ， 选中 创建 热点 链接 的 图 
像 。 将 鼠标 置 于 图 像 上 要 创建 热点 的 部 分 ,绘制 一 个 矩形 热点 。 重 复 以 上 步骤 绘制 其 他 的 热点 ， 并 设置 











5.4.3 创建 E-mail 链接 


E-mail 链接 也 叫 电子 邮件 链接 .电子 邮件 地 址 作为 超 链接 的 链接 目标 与 其 他 链接 目标 不 同 。 当 用 户 
在 浏览 器 上 单 击 指向 电子 邮件 地 址 的 超 链接 时 .将 会 打开 默认 的 邮件 管理 器 的 新 邮件 窗口 ， 其 中 会 提示 
用 户 输入 信息 . 并 将 该 信息 传送 给 指定 的 E-mail 地 址 。 下 面 对 文字 “联系 我 们 ”创建 电子 邮件 链接 当 
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单 击 文字 “联系 我 们 ”时 . 如 图 5-11 所 示 。 
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图 5-11 创建 电子 邮件 链接 的 效果 


打开 网 页 文档 ， 将 光标 置 于 要 创建 电子 邮件 链接 的 位 置 ， 执行 【 插 入 】|【 电 子 邮件 链接 】 命 令 。 弹 
出 【电子 邮件 链接 】 对 话 框 ， 在 对 话 框 的 【文本 】 文 本 框 中 输入 【联系 我 们 】， 在 【电子 邮件 】 文 本 框 中 
输入 “mailto: sdhzgw(@163.com ， 单 击 “ 确 定 ”按钮 ， 创 建 电子 邮 件 链接 。 


5.4.4 创建 脚本 链接 


脚本 超 链接 执行 JavaScript 代码 或 调用 JavaScript 函数 ， 它 非常 有 用 ,能够 在 不 离开 当前 网 页 文档 的 
情况 下 为 访问 者 提供 有 关 某 项 的 附加 信息 。 脚 本 超 链接 还 可 以 用 于 在 访问 者 单 击 特定 项 时 ， 执 行 计算 、 
表单 验证 和 其 他 处 理 任务 ， 打 开 网 页 文档 ， 选 中 选项 【关闭 窗口 ]， 在 【属性 】 面 板 中 的 【链接 】 文 本 框 


中 输入 “javascriptwindow.close0 。 


5.4.5 ”创建 下 载 文件 链接 


如 果 要 在 网 站 中 提供 下 载 资料 ， 就 需要 为 文件 提供 下 载 链接 ， 如 果 超 级 链接 指向 的 不 是 一 个 网 页 文 
件 ,而 是 其 他 文件 . 例如 zip、mp3、exe 文件 等 ， 单 击 链接 的 时 候 就 会 下 载 文件 。 

打开 网 页 文档 ， 选中 要 创建 链接 的 文字 ,执行 【窗口 】|【 属 性 】 命 令 ， 在 面板 中 单 击 【链接 】 文 本 
框 右边 的 按钮 ， 弹 出 【选择 文件 】 对 话 框 ， 在 对 话 框 中 选择 要 下 载 的 文件 ， 单 击 【 和 确定】 按钮， 添加 到 
【和 链接】 文本 框 中 。 


Gf 剖 综 合 实战 
































本 章 概要 性 地 介绍 了 网 页 代码 软件 Dreamweaver 的 一 些 常 用 工具 .为 本 书后 续 的 学 习 打 下 一 个 坚实 


102 








:第 5 章 网 页 代码 软件 Dreamweaver 





的 基础 。 本 章 从 创建 与 管理 站 点 开始 .进行 Web 文件 操作 、 插 入 网 页 图 像 、 创 建 各 种 链接 ， 制 作 吸 引 人 
的 网 站 的 一 些 方法 和 相关 技术 ， 接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进 行 实践 。 


5.5.1 实战 : 制作 化 妆 品 网 页 


在 互联 网 上 ， 项 目 列表 被 广泛 应 用 于 网 站 的 定位 制作 导航 条 、 友 情 链 接 以 及 产品 分 类 页 面 等 。 应 用 
项 目 列表 的 网 页 可 以 给 人 更 加 简洁 和 整齐 的 感觉 。 本 例 将 使 用 Dreamweaver 制作 化 妆 品 网 页 ， 主 要 使 用 
浮动 定位 、 普 通 流 定位 、 无 序列 表 UL 和 定义 列表 DL， 练习 CSS 普通 流 和 浮动 布局 ,无 序列 表 杞 、t 标 
签 的 应 用 ， 定 义 列 表 dl、dt、dd 标签 的 应 用 ，CSSfloat 属性 的 应 用 .如 图 5-12 所 示 。 
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图 5-12 创建 电子 邮件 链接 的 效果 








STEP|01 单 击 【 页 面 属性 】 按 钮 。 新 建 空白 文档 .在 【属性 】 面 板 中 单 击 【 页 面 属性 】 按 钮 ， 如 图 5-13 
所 示 。 
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图 5-13 单 击 【页 面 属性 〗】 按 钮 


STEP|02 设置 【页面 属性 】 对 话 框 。 打 开 【 页 面 属性 】 对 话 框 . 设置 页 面 字 体 大 小 、 背 景 颜色 以 及 超 链 
接 的 样式 和 网 页 的 标题 等 参数 。【 页 面 属性 】 对 话 框 中 外 观 (CSS) 的 设置 如 图 5-14 所 示 . 由 于 浏览 器 的 
宽度 为 1003px， 本 练习 页 面 宽 度 为 775px. 所 以 在 【外 观 (CSS)】 选 项 卡 中 设置 左 、 右 边 距 各 为 114px 
页 面 在 浏览 器 中 显示 为 水 平 居中 。 

【页 面 属性 】 对 话 框 中 链接 (CSS) 的 设置 如 图 5-15 所 示 。 
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网 页 设计 与 网 站 建设 自学 经 典 
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图 5-14 设置 【外 观 (CSS) 〗 对 话 框 
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图 5-15 链接 (CSS) 


【页 面 属 性 】 对 话 框 中 标题 /编码 的 设置 如 图 5-16 所 示 。 
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图 5-16 【页 面 属性 】 对 话 框 
STEP|I03 设置 ID 为 header。 执行 【插入 】|Div 命令 ,在 弹出 的 【插入 Div】 对 话 框 中 设置 ID 为 header， 





104 








:: :第 5 章 网 页 代码 软件 Dreamweaver 








如 图 5-17 所 示 。 









































图 5-17 设置 ID 为 header 


STEP|04 在 【插入 Div】 对 话 框 中 单 击 【新 建 CSS 规则 】 按 钮 ， 在 弹出 的 【新 建 CSS 规则 】 对 话 框 中 
单 击 【 确 定 】 按 钮 ， 即 可 打开 【#beader 的 CSS 规则 定义 】 对 话 框 . 设置 参数 并 在 该 层 中 输入 文本 ,如 图 
5-18 所 示 。 
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图 5-18 【新 建 CSS 规则 〗 对 话 框 
如 图 5-19 所 示 为 【#eader 的 CSS 规则 定义 】 对 话 框 中 【类 型 】 的 设置 。 
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图 5-19 类 型 的 设置 
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如 图 5-20 所 示 为 【#beader 的 CSS 规则 定义 】〗 对 话 框 中 【区 块 】 的 设置 。 
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图 5-20 区 块 的 设置 


如 图 5-21 所 示 为 【#header 的 CSS 规则 定义 】 对 话 框 中 【 方 框 】 的 设置 。 
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图 5-21 方 框 的 设置 
插入 一 个 ID 为 header 的 层 并 定义 其 CSS 样式 后 的 效果 如 图 5-22 所 示 。 
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图 5-22 页 面 效 果 
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STEP|05 使 用 相同 的 方法 在 页 面 中 插入 一 个 人 D 为 nav 的 层 并 定义 其 CSS 样式 . 如 图 5-23 一 图 5-26 






































所 示 。 
插入 : | 在 标签 后 [<div id="header"> =] 
| 
ID: nav 加 
新 建 CSS 规则 
图 5-23 【插入 Div】 对 话 框 
本 人 | ED 
为 CSS 规则 选择 上 下 文选 择 器 类 型 。 
功 ( 仅 应 用 于 一 个 UML 元 素 》 | 
选择 加 名称: 
选择 或 输入 选择 器 名 称 。 
av 下 
和 各 各 5 
和 » - 
不 太 具 体 。” ] [ ”更 具体 
规则 定义 : 
选择 定义 规则 的 位 置 。 
《 公 限 该 文档 ) -| | 
图 5-24 【新 建 CSS 规则 〗 对 话 杠 
#nav 工 
BACKGROUND-IMAGE: url(images/nav.jpg); 
WIDTH: 775px; 
HEIGHT: 35px 
} 
图 5-25 CSS 样式 代码 
STEP|06 然后 单 击 【 属 性 】 面 板 中 的 【项 目 列表 】 按 钮 . 在 攻 为 nav 的 层 中 插入 有 关 导 航 文本 的 列表 . 





并 定义 其 CSS 样式 ， 如 图 5-27 和 图 5-28 所 示 。 
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分 类 方 杠 
TidthO) : 775 ~ [本 = Poat0) : ~ 
Height 0) : 35 vp | DeerC) : - 
Padding Margin 
团 全 部 相同 G) 团 全 部 相同 ) 
过 Top FP) : -x = Top (0) = [rx = 
Right R) ; -sx 7) Rigt() -px = 
Bottom (B) : ||px -| Botton 0 ||px 四 
Left 0) : | |px - Left (E) : ||mx 
帮助 00 确定 取消 应 用 以) 

















图 5-26 【#mav 的 CSS 规则 定义 〗 对 话 框 


#nav ul Li { 





DISPLAY: ; : 
PADDING-LEFT: | OLANEL LADY 
FONT-SIZE: ; 
LINE-HEIGHT: 

} 

#nav UL { 2 革 人 
PADDING-RIGHT: 6px; 二 
PADDING-LEFT: 6px; 下 
PADDING-BOTTOM: 5 2 
MARGIN: 4px; “ od 
PADDING-TOP: 

} 

图 5-27 CSS 样式 代码 图 5-28 插入 项 目 列表 


STEP|07 输入 护肤 及 护肤 下 的 产品 目录 。 使 用 相同 的 方法 在 页 面 中 插入 一 个 ID 为 main 的 层 并 定义 其 
CSS 样式 。 单 击 菜单 栏 中 的 【格式 】| 【列表 】|【 定 义 列表 】 按 钮 和 【定义 术语 】 按 钮 . 输入 文本 “护肤 。 
单 击 【 定 义 说 明 】 按 钮 ， 依 次 输入 “护肤 ”下 的 产品 目录 . 如 图 5-29 和 图 5-30 所 示 。 
#main 

BACKGROUND-IMAGE: url(images/index.jpg); 

WIDTH: 775px; 

PADDING-TOP: 1l16px; 

HEIGHT: 382px 











图 5-29 CSS 样式 代码 
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青春 优 所 系列 -抵抗 纲 纹 
立体 塑 颜 系列 - 抗 镇 紧 肤 
金 弛 卓 颜 系列 -抵抗 衬 老 
镑 节 华 光 系列 - 根 致 癌 护 
柏 黄 囊 妍 系列 -肌肤 塑造 
密 养 关 关 系列 -营养 修 护 


图 5-30 输入 护肤 及 护肤 下 的 产品 目录 


STEP|08 输入 香水 及 香水 下 的 产品 目录 。 在 【CSS 样式 】 面 板 中 分 别 新 建 “#main dl” 和 “.tit” 规 则 并 
设置 参数 。 使 用 相同 的 方法 设置 “香水 ”下 的 产品 目录 。 然 后 在 页 面 中 插入 一 个 ID 为 main 的 层 并 定义 
其 CSS 样式 ,输入 版 权 信息 ， 如 图 5-31 和 图 5-32 所 示 。 
3 

DISPLAY: block; 

PADDING-LEFT: Spx; 

FONT-WEIGHT: bold; 

FONT-SIZE: 14px; 

MARGIN-LEFT: 35px; 

WIDTH: 150px; 

COLOR: #4484be; 

BORDER-BOTTOM: #7aabc2 lpx solid; 

HEIGHT: 








#main dl { 
FONT-SIZE: 12px; 
MARGIN-LEFT: 550px; 
LINE-HEIGHT: 





图 5-31 CSS 样式 代码 

;香水 

| 丙 球 香水 _ 晴 蝶 夫 人 
奇迹 香水 _ 永恒 的 夏天 


梦 鬼 香水 -清秀 佳人 
本 珍 要 香水 -他 城 之 六 ------------ 


图 5-32 输入 香水 及 香水 下 的 产品 目录 
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5.5.2 ”实战 : 制作 服装 时 尚 页 


浮动 框架 是 一 种 特殊 的 框架 。 它 与 普通 框架 区 别 在 于 .浮动 框架 不 需要 通过 标签 加 载 .而 是 直接 谋 
入 到 页 面 内 部 ， 在 页 面 中 显示 其 他 页 面 内 容 ， 因 此 它 又 被 称 作 谋 入 帧 。 本 例 将 使 用 Dreamweaver 制作 服 
装 时 尚 页 , 主要 使 用 以 XHTML+CSS 的 方式 制作 一 个 网 页 , 并 在 网 页 中 嵌入 浮动 框架 . 练习 a 标签 Target 
属性 的 使 用 方法 、 插 入 浮动 框架 、 设 置 浮动 框架 的 属性 . 如 图 5-33 所 示 。 


关于 天 们 关于 尽 黎 产品 展示 店面 形象、 营 清 友 车” 迁 销 加 归 ”联系 我 们 
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经 册 时 身 装 


地 册 日 视 筑 
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经 席 回 师 
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图 5-33 制作 服装 时 尚 页 


STEP|01 插入 ID 为 container 的 层 。 新 建 空白 文档 ， 在 【属性 】 面 板 中 打开 【页 面 属性 】 对 话 框 ， 在 各 
个 选项 卡 中 设置 页 面 字体 大 小 、 上边 距 、 下 边 距 和 和 链接 样式 等 属性 。 在 【布局 】 选 项 卡 中 单 击 【插入 Div 

















标签 】 按 钮 ， 在 文档 中 插入 一 个 为 container 的 层 . 然后 在 【CSS 样式 】 面 板 中 打开 【#eontainer 的 CSS 
规则 定义 】 对 话 框 ,分 别 在 【 方 框 ]、【 边 框 】 和 【定位 】 选 项 卡 中 设置 参数 ， 如 图 5-34 和 图 5-35 所 示 。 











| 赛 旬 | 00;x 2 于) | 篆 景 图 象 CD) 国 Qus 无 
[| 帝 00 | 570px| 可 内 性 w) [tofwat vz] 痛 果 颜色 开 ) :| 























分 类 梯 接 (Css) 
On 宰 近 字体: 品 〈 同 有 而 字体 ) ~ = = 
ss 大 小 G): | 
其 接 着色 0D: 人 [| 可 下 变换 图 像 檬 接 &): 本 | #00512 
己 访 ij 村 接 om: DT 活动 链接 愉 ): | 地 PC 
#container { TR QD :[ 俊 在 克扣 图 各 时 时 示 下 天 = 
width:800px; WN _ 


9 奈 里 加 :siyBloe 天 昔 
margin-left:auto; orn: OD 


margin-right:auto; 





编 员 [elesde OTES) 
























position:re icod 村 人 表单: [CE 和 是 ES 

height ; a ieee EE oo 名 

border:#3db4df lpx solid; [ELT 匡 三 刁 ES ES 
} 





图 5-34 CSS 样式 代码 图 5-35 插入 ID 为 container 的 层 
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STEP|02 插入 ID 为 Jogo、mainleft、main 的 层 。 在 IJD 为 container 的 层 中 插入 一 个 IJD 为 logo 的 层 并 定 
义 其 CSS 样式 ， 然 后 在 【属性 】 面 板 中 单 击 【 项 目 列表 】 按 钮 ,在 该 层 中 插入 一 个 项 目 列表 ， 并 分 别 为 
各 个 项 目 创建 链接 及 定义 链接 的 样式 .在 IJD 为 logo 的 层 下 面 插入 一 个 有 D 为 mainleft 的 层 , 并 定义 其 CSS 
样式 。 在 【属性 】 面 板 中 单 击 【 项 目 列表 】 按 钮 . 在 该 层 中 插入 一 个 列表 并 定义 其 CSS 样式 。 然 后 依次 
为 各 个 项 目 创建 链接 和 目标 框架 ,在 【CSS 样式 ] 面板 中 定义 列表 中 文本 链接 的 样式 。 然 后 在 ID 为 mainleft 
的 层 下 面 插入 一 个 卫 为 main 的 层 并 定义 其 CSS 样式， 如 图 5-36 所 示 。 

STEP|03 设置 【#footer 的 CSS 规则 定义 】 对 话 框 。 在 【布局 】 选 项 卡 中 单 击 RAME 按钮 . 在 IJD 为 
main 的 层 中 插入 一 个 浮动 框架 。 然 后 执行 【窗口 】|【 标 签 检查 器 】 命 令 . 打开 【标签 检查 器 】 面 板 ， 在 
【常规 】 选 项 卡 中 设置 框架 的 高 度 、 边 距 等 参数 。 在 ID 为 main 的 层 下 面 插入 一 个 IJD 为 footer 的 层 . 并 
在 【CSS 样式 】 面 板 中 打开 【#footer 的 CSS 规则 定义 】 对 话 框 . 设置 大 小 、 左 右边 距 等 参数 ， 其 最 终 的 
设置 代码 如 图 5-37 所 示 。 


#logo { 
background-image:url(images/nav.jpg); 















































} 

#logo ul { 
margin-left:260px; 
padding-top:15px; 
Line-height:27px; 








} 
#logo ul li { 






















display: es 
margin 
padding 
} 
#mainleft { 
float:1 
width #footer { 
margin:Or width:800px; 
height:529p» margin-left:auto; 
padding:Opx; margin-right:auto; 
} Foe Se 
Wein height:30px; 
height 8 
FEE text- i center; 
width ; Line-height: ) 
margi xj padding-right:30px; color:#000 
} } 


图 5-36 插入 ID 为 logo、mainleft、main 的 层 图 5-37 设置 【#footer 的 CSS 规则 定义 】〗 对 话 框 








STEP|04 然后 在 卫 为 footer 的 层 中 插入 一 个 人 D 为 left 的 层 . 并 打开 【大 eft 的 CSS 规则 定义 】 对 话 框 ， 
在 【 方 框 】 选 项 卡 中 设置 Float 为 left， 并 输入 版 权 信息 文本 。 在 JD 为 left 的 层 下 面 插入 一 个 卫 为 Tight 
的 层 . 在 【CSS 样式 】 面 板 中 打开 【#might 的 CSS 规则 定义 】 对 话 框 . 在 【 方 框 】 选 项 卡 中 设置 Float 为 
Tight， 然 后 在 该 层 中 输入 并 为 文本 创建 链接 。 在 【CSS 样式 】 面 板 中 定义 文本 已 被 访问 状态 、 未 被 访问 
状态 和 鼠标 悬 停 状 态 时 的 链接 样式 。 





文本 是 网 页 中 的 重要 内 容 ， 是 表述 内 容 的 载体 ， 如 果 没 有 吸引 人 的 文本 内 容 ， 网 页 做 得 再 漂亮 也 会 
显得 太空 洞 .Dreamweaver 可 以 方便 地 为 网 页 插入 各 种 文本 内 容 , 并 对 文本 进行 排版 设置 .在 Dreamweaver 
中 添加 文本 和 图 像 就 好 像 在 Word 中 操作 一 样 . 可 以 直接 输入 文本 . 也 可 以 通过 复制 和 粘贴 的 方式 复制 文 
本 ,或 者 从 Word 或 Excel 中 导入 文本 内 容 。 

本 章 主要 介绍 网 页 文本 概述 、 插 入 文本 、 项 目 列表 和 综合 实战 。 通 过 对 本 章 的 学 习 ， 我 们 可 以 知道 
怎样 处 理 网 页 中 的 文本 元 素 、 如 何在 网 页 中 插入 水 平 线 以 及 特殊 符号 等 。 
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| 61 | 网 页 文本 概述 


页 面 属性 是 网 页 文档 的 基本 属性 。Dreamweaver 秉承 了 之 前 版 本 的 特色 ， 提供 可 视 化 的 界面 ， 帮 助 
用 户 设置 网 页 的 基本 属性 ,包括 网 页 的 整体 外 观 、 统 一 的 超 链 接 样式 及 标题 样式 等 。 

本 节 主 要 讲述 页 面 对 话 框 和 外 观 (CSS) 属性 、 设 置 外 观 (HTML) 属性 、 设 置 链 接 和 标题 (CSS) 
属性 、 设 置 标题 /编码 属性 、 设 置 跟踪 图 像 属性 。 通 过 对 本 节 的 学 习 ， 为 后 期 的 网 站 建设 奠定 基础 。 


6.1.1 页 面 对 话 框 和 外 观 (CSS) 属性 


在 Dreamweaver 中 打开 已 创建 的 网 页 或 新 建 空白 网 页 ， 然 后 即 可 在 空白 处 右 击 .执行 【页 面 属性 】 
命令 , 打开 【页 面 属 性 】 对 话 框 。 该 对 话 框 中 主要 包含 三 个 部 分 ， 即 【分 类 】 列 表 菜单 、 设 置 区 域 ， 以 
及 下 方 的 按钮 组 等 。 

用 户 可 在 【分 类 】 列 表 中 选择 相应 的 项 目 ， 然 后 根据 右 侧 更 新 的 设置 区 域 ， 设 置 网 页 的 全 局 属性 。 
然后 ， 即 可 单 击 下 方 的 【应 用 】 按 钮 ， 将 更 改 的 设置 应 用 到 网 页 中 。 用 户 也 可 单 击 【 确 定 】 按 钮 ， 在 应 
用 更 改 的 同时 关闭 【页 面 属性 】 对 话 框 。 

【外 观 (CSS)】 属 性 的 作用 是 通过 可 视 化 界面 为 网 页 创建 CSS 样式 规则 ， 定 义 网 页 中 的 文本 、 背 景 
以 及 边 距 等 基本 属性 。 在 打开 【页 面 属性 】 对 话 框 后 . 默认 显示 的 就 是 外 观 (CSS) 属性 的 设置 项 目 . 其 
主要 包括 12 种 设置 。 在 设置 网 页 背景 图 像 的 重复 显示 时 ， 用 户 可 选择 4 种 属性 。 


6.1.2 设置 外 观 CHTML) 属性 
【外 观 (HTML)] 属性 的 作用 是 以 HTML 语言 的 属性 来 设置 页 面 的 外 观 . 其 中 的 一 些 项 目 功能 与 【外 
观 CSS)】 属 性 相同 ， 但 实现 的 方法 不 同 ， 如 表 6-1 所 示 。 


表 6-1 【外 观 (CSS)】 属性 


属 性 名 作 用 

页 面 字体 | 在 其 右 侧 的 下 拉 列 表 菜 单 中 ， 用 户 可 为 网 页 中 的 基本 文本 选择 字体 类 型 
二 

加 


















































单 击 该 按钮 可 设置 网 页 中 的 基本 文本 为 粗 体 

| 单 击 该 按钮 可 设置 网 页 中 的 基本 文本 为 斜体 

大 小 在 其 右 侧 输入 数值 并 选择 单位 ， 可 设置 网 页 中 的 基本 文本 字体 的 尺寸 

文本 颜色 通过 颜色 拾取 器 或 输入 颜色 数值 设置 网 页 基本 文本 的 前 景色 

背景 颜色 通过 颜色 拾取 器 或 输入 颜色 数值 设置 网 页 背 录 颜色 

单 击 【浏览 〗 按 钮 ， 即 可 选择 背景 图 像 文件 。 直 接 输入 图 像 文件 的 URL 地 址 也 可 以 设置 背景 




















dh 图 像 文件 

重复 如 果 用 户 为 网 页 设置 了 背景 图 像 ， 则 可 在 此 设置 背景 图 像 小 于 网 页 时 产生 的 重复 显示 
左边 距 定义 网 页 内 容 与 左 侧 浏览 器 边框 的 距离 

右边 距 定义 网 页 内 容 与 右 侧 浏览 器 边框 的 距离 

上 边 距 定义 网 页 内 容 与 顶部 浏览 器 边框 的 距离 








下 边 距 定义 网 页 内 容 与 底部 浏览 器 边框 的 距离 
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经 典 








【外 观 (HIML)】〗 属 性 中 主要 包括 以 下 设置 , 如 表 6-2 所 示 。 
表 6-2 【外 观 (HTML)】 属 性 




















属 性 名 作 呈 本 用 

背景 图 像 定义 网 页 背景 图 像 的 URL 地 址 

背景 定义 网 页 背景 颜色 

文本 定义 普通 网 页 文本 的 前 景色 

已 访问 链接 定义 已 访问 的 超 链接 文本 的 前 景色 

链接 定义 普通 链接 文本 的 前 景色 

活动 链接 定义 鼠标 单 击 链接 文本 时 的 前 景色 

左边 距 定义 网 页 内 容 与 左 侧 浏览 器 边框 的 距离 

上 边 距 定义 网 页 内 容 与 上 方 浏览 器 边框 的 距离 

边 距 宽度 翻译 错误 ， 应 为 右边 距 。 定 义 网 页 内 容 与 右 侧 浏 览 器 边框 的 距离 
边 距 高 度 翻译 错误 ， 应 为 下 边 距 。 定 义 网 页 内 容 与 底部 浏览 器 边框 的 距离 


6.1.3 ”设置 链接 和 标题 (CSS) 属性 
【链接 (CSS)】 属性 的 作用 是 用 可 视 化 的 方式 定义 网 页 文档 中 超 链接 的 样式 ， 其 属性 设置 ， 如 表 6-3 





所 示 。 
表 6-3 【链接 (CSS)】 属 性 
属 性 名 作 用 
链接 字体 设置 超 链接 文本 的 字体 
加 选中 该 按钮 ， 可 为 超 链接 文本 应 用 粗 体 
7 选中 该 按钮 ， 可 为 超 链接 文本 应 用 针 体 
大 小 设置 超 链接 文本 的 尺寸 
链接 颜色 设置 普通 超 链接 文 二 的 前 录 色 
变换 图 像 链接 设置 鼠标 滑 过 超 链接 文 二 的 前 录 色 
已 访问 链接 设置 已 访问 的 起 链接 文本 的 前 景色 
活动 链接 设置 鼠标 单 击 超 链接 文本 的 前 景色 
下 画 线 样式 设置 起 链接 文本 的 其 他 样式 


Dreamweaver 根据 CSS 样式 ,定义 了 4 种 基本 的 下 画 线 样式 供用 户 选 择 , 【链接 (CSS)】 属 性 所 定 
义 的 超 链 接 文本 样式 是 全 局 样式 ， 因 此 ， 除 非 用 户 为 某 一 个 超 链接 单独 设置 样式 ， 否 则 所 有 超 链接 文本 
的 样式 都 将 遵从 这 一 属性 ， 如 表 6-4 所 示 。 


表 6-4 【链接 (CSS)】 属 性 下 画 线 样式 










下 画 线 样式 










为 所 有 超 链 接 文本 添加 始终 显示 的 下 画 线 
始终 隐藏 所 有 超 链接 文本 的 下 画 线 
定义 只 在 光标 滑 过 超 链 接 文本 时 显示 下 画 线 
定义 只 在 光标 滑 过 起 链接 文本 时 隐藏 下 画 线 






始终 无 下 画 线 
仅 在 变换 图 像 时 显示 下 画 线 
变换 图 像 时 隐藏 下 画 线 
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标题 是 标明 文章 、 作 品 等 内 容 的 简短 语句 。 在 网 页 的 各 种 文章 中 .标题 是 不 可 缺少 的 内 容 ， 是 用 于 
标识 文章 主要 内 容 的 重要 文本 。 在 XHTML 语言 中 . 
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用 户 可 定义 6 种 级 别 的 标题 文本 。【 标 题 (CSS)】 属 


性 的 作用 就 是 设置 这 6 级 标题 的 样式 .包括 使 用 的 字体 、 加 粗 、 倾 斜 等 样式 .以 及 分 级 的 标题 尺寸 、 颜 


色 等 。 


6.1.4 ”设置 标题 /编码 属性 


在 使 用 浏览 器 打开 网 页 文档 时 , 浏览 器 的 标题 栏 会 显 
【标题 /编码 】 属 性 可 以 方便 地 设置 这 一 标题 内 容 . 如 


示 网 页 文档 的 名 称 . 这 一 名 称 就 是 网 页 的 标题 。 
图 6-1 所 示 。 








标 | 


文件 文件 夹 
站 点 文件 夫 


帮助 00 





图 6-1 


除 此 之 外 . 【标题 /编码 】 属 性 还 可 以 设置 网 页 文档 所 使 用 的 语言 规范 、 字 符 编码 等 多 种 属性 ， 


6-5 所 示 。 


[外观 Css) 
| Ey 标题 0)， 记 内 网络 
Css) 文档 类 型 0TD) [DL LO Transitiontl ~ 
| ransiti 
妨 码 中) 


icede 标准 化 表单 0): [E 妥 





与 网 站 建设 源 文件 \06\ 制 作 企业 介绍 网 页 \ 


[iT 





标题 /编码 


如 表 


表 6-5 【标题 /编码 】 属 性 


属 “性 作 用 

标题 定义 浏览 器 标题 栏 中 显示 的 文本 内 容 

文档 类 型 定义 网 页 文档 所 使 用 的 结构 语言 

编码 定义 文档 中 字符 使 用 的 编码 

Unicode 标准 化 表单 当选 择 UTF-8 编码 时 ， 可 选择 编码 的 字符 模型 
包括 Unicode 签名 在 文档 中 包含 一 个 字 节 顺序 标记 

文件 文件 夫 显示 文档 所 在 的 目录 

站 点 文件 夫 显示 本 地 站 点 所 在 的 目录 


编码 是 网 页 所 使 用 的 语言 编码 。 目 前 国内 使 用 较 广泛 的 编码 主要 包括 以 下 几 种 ， 如 表 6-6 所 示 。 
表 6-6 常用 的 编码 方式 
Unicode (UTF-8) 


简体 中 文 (GB2312) 
简体 中 文 (GB18030) 


使 用 最 广泛 的 万 国 码 ， 可 以 显示 包括 中 文 在 内 的 多 种 语言 
1981 年 发 布 的 汉字 计算 机 编码 
2000 年 发 布 的 汉字 计算 机 编码 
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6.1.5 ”设置 跟踪 图 像 属性 


在 设计 网 页 时 ， 往 往 需 要 先 使 用 Photoshop 或 Fireworks 等 图 像 设计 软件 制作 一 个 网 页 的 界面 图 
然后 再 使 用 Dreamweaver 对 网 页 进行 制作 。【 跟 踪 图 像 】 属 性 的 作用 是 将 网 页 的 界面 图 作为 网 页 的 半 透 
明 背 景 . 插入 到 网 页 中 。 然 后 .用 户 在 制作 网 页 时 即 可 根据 界面 图 决定 网 页 对 象 的 位 置 等 ， 如 图 6-2 
所 示 。 












































分 类 _ 腿 革 图 隐 
Da) Ws © Er 
人 通明 度 中) look 
| 透明 开明 
图 6-2 跟踪 图 像 





在 【跟踪 图 像 】 属 性 中 ， 主 要 包括 两 种 属性 设置 ， 如 表 6-7 所 示 。 
表 6-7 【跟踪 图 像 】 属 性 设置 


















单 击 【 浏 览 〗 按 钮 ， 即 可 在 弹出 的 对 话 框 中 选择 跟踪 图 像 的 路 径 和 文件 名 。 除 此 之 外 ， 用 户 还 
可 直接 在 其 后 的 输入 文本 域 中 输入 跟踪 图 像 的 URL 地 址 
定义 跟踪 图 像 在 网 页 中 的 透明 度 ， 取 值 范围 为 09%6~100%6。 当 选中 0%6 时 ， 焉 踪 图 像 完全 透明 
当选 中 100% 时 ， 跟 踪 图 像 完全 不 透明 









透明 度 





6.2 


使 用 Dreamweaver, 用 户 可 以 方便 地 为 网 页 插入 文本 , Dreamweaver 提供 了 三 种 插入 文本 的 方式 , 包 
括 直接 输入 、 从 外 部 文件 中 粘贴 ， 以 及 从 外 部 文件 中 导入 。 本 节 主 要 讲述 直接 输入 文本 和 从 外 部 文件 中 
粘贴 、 从 外 部 文件 中 导入 和 插入 特殊 符号 、 插 入 水 平 线 和 日 期 、 段 落 的 创建 和 格式 设置 。 用 户 通过 对 本 
节 的 学 习 ， 为 后 期 的 网 站 建设 商定 基础 。 


6.2.1 直接 输入 文本 和 从 外 部 文件 中 粘贴 


直接 输入 是 最 常用 的 插入 文本 的 方式 。 在 Dreamweaver 中 创建 一 个 网 页 文档 ， 即 可 直接 在 【设计 视 
图 】 中 输入 英文 字母 . 或 切换 到 中 文 输入 法 . 输入 中 文字 符 。 
除 直 接 输 入 外 ,用 户 还 可 以 从 其 他 软件 或 文档 中 将 文本 复制 到 剪贴 板 中 ,然后 再 切换 至 Dreamweaver. 
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右 击 执行 【粘贴 】 命 令 或 按 CtrltV 组 合 键 . 将 文本 粘贴 到 网 页 文档 中 。 除 了 直接 粘贴 外 ，Dreamweaver 
还 提供 了 选择 性 粘贴 功能 ,人 允许 用 户 在 复制 了 文本 的 情况 下 . 选择 性 地 粘贴 文本 中 的 某 一 个 部 分 ， 如 图 
6-3 所 示 。 
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图 6-3 选择 性 粘贴 


在 复制 内 容 后 , 用户 可 在 Dreamweaver 打开 的 网 页 文档 中 右 击 . 执行 【选择 性 粘贴 】 命令, 打开 【 选 
择 性 粘贴 】 对 话 框 。 在 弹出 的 【选择 性 粘贴 】 对 话 框 中 ， 用 户 可 对 多 种 属性 进行 设置 ， 如 表 6-8 所 示 。 





表 6-8 【选择 性 粘贴 】 对 话 框 中 的 属性 


属 性 作 用 
仅 文本 仅 粘贴 文本 字符 ， 不 保留 任何 格式 
带 结构 的 文本 包含 段落 、 列 表 和 表格 等 结构 的 文本 
带 结构 的 文本 以 及 基本 格式 包含 段落 、 列 表 、 表 格 以 及 粗 体 和 锋 体 的 文本 
带 结构 的 文本 以 及 全 部 格式 包含 段落 、 列 表 、 表 格 以 及 粗 体 、 和 斜体 和 色彩 等 所 有 样式 的 文本 
保留 换行 符 选中 该 选项 后 ， 在 粘贴 文本 时 将 自动 添加 换行 符号 
清理 Word 段落 间距 选中 该 选项 后 ， 在 复制 Word 文本 后 将 自动 清除 段落 间距 
粘贴 首选 参数 更 改选 择 性 粘贴 的 默认 设置 


6.2.2 ”从 外 部 文件 中 导入 和 插入 特殊 符号 


Dreamweaver 还 允许 用 户 从 Word 文档 或 Excel 文档 中 导入 文本 内 容 。 在 Dreamweaver 中 ， 将 光标 定 
位 到 导入 文本 的 位 置 . 然后 执行 【文件 】|【 导 入 】|【Word 文档 】 命 令 (或 【文件 】 |【 导 入 】| 【Excel 
文档 】 命 令 ) ， 选 择 要 导入 的 Word 文档 或 Excel 文档 ， 即 可 将 文档 中 的 内 容 导入 到 网 页 文档 中 。 

符号 也 是 文本 的 一 个 重要 组 成 部 分 。 使 用 Dreamweaver 除了 可 以 插入 键盘 允许 输入 的 符号 外 ， 还 可 
以 插入 一 些 特殊 的 符号 。 在 Dreamweaver 中 ,执行 【插入 】| 【特殊 字符 】 命 令 ， 即 可 在 弹出 的 菜单 中 选 
择 各 种 特殊 符号 。 或 者 在 【插入 】 面 板 中 .在 列表 菜单 中 选择 【文本 】， 然 后 单 击 面板 最 下 方 的 按钮 右 侧 
箭头 , 也 可 在 弹出 的 菜单 中 选择 各 种 特殊 符号 。 Dreamweaver 允许 为 网 页 文档 插入 12 种 基本 的 特殊 符号 
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如 表 6-9 所 示 。 
表 6-9 12 种 基本 的 特殊 符号 

图 标 显 示 
| 遇 -字符 - 执行 符 Ghift + Enter} 两 段 间 距 较 小 的 空格 
| 出 此 主 符 -不 执行 空格 | 非 间断 性 的 空格 
[ele 字符 左 引 对 ] 左 引 号 “ 
[人 ] 右 引号 ” 
| 一- 字符。 W 折 本 ] 破 折 线 一 一 
| ~ -字符 - 二 大白 皮 | 短 破 折线 一 
| -字符 - 英镑 符 号 | 英镑 符号 大 
| 翅 -字符 -欧元 符号 | 欧元 符号 € 
|_ -字符 -日 元 符号 | 日 元 符号 
|@ -字符 ; 版权 | 版 权 符号 加 
| @ -于 符 -注册 商标 ] 注册 商标 符号 四 
[TY -字符 - 商标 | 商标 符号 ™ 


6.2.3 ”插入 水 平 线 和 日 期 


水 平 线 和 日 期 是 较为 特殊 的 文本 对 象 ，Dreamweaver 允许 用 户 方便 地 为 网 页 文档 插入 这 两 种 对 象 。 
很 多 网 页 都 使 用 水 平 线 以 将 不 同类 的 内 容 隔 开 。 在 Dreamweaver 中 ， 用 户 也 可 方便 地 插入 水 平 线 。 执 行 
【插入 】IHIMLI【 水 平 线 】 命 令 ，Dreamweaver 就 会 在 光标 所 在 的 位 置 插入 水 平 线 。 在 选中 水 平 线 后 ， 即 
可 在 【属性 】 检 查 器 中 设置 水 平 线 的 各 种 属性 。 水 平 线 的 属性 并 不 复杂 .主要 包括 以 下 种 类 ， 如 表 6-10 
所 示 。 























表 6-10 水 平 线 的 属性 


设置 水 平 线 的 ID 
设置 水 平 线 的 宽度 和 高 度 ， 单 位 可 以 是 像素 或 百分比 


指定 水 平 线 的 对 齐 方式 ， 包 括 默认 、 左 对 齐 、 居 中 对 齐 和 右 对 齐 
可 为 水 平 线 添加 投影 





Dreamweaver 还 支持 为 网 页 插入 本 地 计算 机 当前 的 时 间 和 日 期 。 执 行 【 插 入 】| 【日 期 】 命 令 . 或 在 
【插入 】 面 板 中 的 列表 菜单 中 选择 【常用 ]， 然 后 单 击 【 日 期 ]， 即 可 打开 【插入 日 期 】 对 话 框 。 在 【插入 
日 期 】 对 话 框 中 ， 人 允许 用 户 设置 各 种 格式 .如 表 6-11 所 示 。 

















表 6-11 【插入 日 期 】 中 人 允许 设置 的 格式 













星期 格式 
日 期 格式 
时 间 格 式 
存储 时 自动 更 新 


在 选项 的 下 拉 列 表 中 可 选择 中 文 或 英文 的 星期 格式 ， 也 可 选择 不 要 星期 
在 选项 框 中 可 选择 要 插入 的 日 期 格式 

在 该 项 的 下 拉 列 表 中 可 选择 时 间 格 式 或 者 不 要 时 间 

如 果 选 中 该 复 选 框 ， 则 每 次 保存 网 页 文档 时 都 会 自动 更 新 插入 的 日 期 时 间 












118 





第 6 章 添加 网 页 中 的 文本 














6.2.4 段落 的 创建 和 格式 设置 
对 于 文字 信息 较 多 的 网 页 ， 可 创建 段落 ,使 文本 以 段落 的 形式 显示 ， 更 加 美观 ， 也 更 易于 阅读 。 段 
落 是 指 一 段 格式 统一 的 文本 。 在 网 页 文档 的 设计 视图 中 ， 每 输入 一 段 文 本 ， 按 Enter 键 后 ，Dreamweaver 


会 自动 为 文本 插入 段落 ,如 





图 6-4 所 示 。 
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图 6-4 为 文本 插入 段落 


在 Dreamweaver 中 ， 人 允许 用 户 使 用 【属性 】 面 板 设置 段落 的 格式 ， 缩 进 和 凸 出 某 个 段落 时 ， 整 个 段 
落 都 会 相应 地 缩 进 或 凸 出 ， 而 并 非 只 有 段落 的 首 行 缩 进 和 凸 出 。 设 置 段落 的 缩 进 和 凸 出 可 通过 CSS 样式 
表 或 手动 输入 全 角 空 格 来 实现 。 关 于 CSS 样式 表 ， 请 参考 “设计 网 页 元 素 样式 ”的 相关 章节 

在 【属性 】 面 板 中 ， 用户 可 在 【格式 】 下 拉 列 表 中 将 段落 转换 为 普通 文本 、 预 先 格式 化 的 文本 (不 
换行 的 普通 文本 ) 以 及 6 种 标题 文本 。 单 击 【 文 本 凸 出 】 按 钮 ， 可 将 整个 段落 向 左 平移 一 个 制 表 位 。 而 
单 击 【 文 本 缩 进 】 按 钮 ， 可 将 整个 段落 向 右 平移 一 个 制 表 位 。 

自 Dreamweaver 开始 ,将 原 【 属 性 】 面 板 中 的 各 种 设置 选项 分 为 了 HTML 和 CSS 两 个 选项 卡 。【 属 
性 】 面 板 中 的 大 部 分 功能 都 以 CSS 样式 的 形式 实现 。 关 于 CSS 样式 .请 参考 “设计 网 页 元 素 样式 ”的 相 
关 章 节 


?Ee 灿 项 目 列表 


项 目 列表 . 又 被 称 作 无 序列 表 . 是 网 页 文档 中 最 基本 的 列表 形式 。 列表 类 似 于 Word 中 的 项 目 符号 和 
编号 ， 可 以 给 文本 添加 项 目 符号 或 编号 ， 目 前 列表 和 CSS 相 结 合 ， 可 以 创造 出 非常 漂亮 的 效果 。 本 节 主 
要 讲述 创建 项 目 列表 、 赃 套 项 目 列表 、 列 表 项 目的 样式 。 用 户 通过 对 本 节 的 学 习 ， 为 后 期 的 网 站 建设 奠 
定 基础 。 


6:3.1 




















创建 项 目 列表 


在 Dreamweaver i 用 户 可 以 通过 可 视 化 的 操作 插入 项 目 列表 。 执 行 【插入 】IHIMLI【 项 目 列表 】 


命令 ， 即 可 插入 一 个 空 的 项 目 列表 .如 图 6-5 所 示 。 
默认 情况 下 . i 会 带 有 一 个 圆 点 ““” 作 为 项 目 符号 。 在 输入 第 一 个 列 


表 项 目 后 ， 用户 可 直接 按 Enter 键 创建 下 一 个 列表 项 目 . 并 依次 输入 列表 项 目的 内 容 。 
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图 6-5 创建 项 目 列表 


6.3.2” 詹 套 项 目 列表 


项 目 列表 是 可 谋 套 的 。 用 户 可 以 方便 地 将 一 个 新 的 项 目 列表 作为 已 有 项 目 列表 的 列表 项 目 ， 插 入 到 
网 页 文档 中 。 在 已 有 项 目 列表 中 创建 一 个 空 列 表 项 目 ， 即 可 








选中 该 列表 项 目 ， 右 击 执行 【格式 】| 【 缩 进 ] 命令 .创建 了 绑 ，。 eS 

项 目 列表 。 为 子 项 目 列表 添加 列表 项 目的 方法 与 直接 添加 列 。 :只 ao) Goalnt 

表 项 目 类 似 ， 用 户 只 需要 按 Enter 键 即 可 ， 如 图 6-6 所 示 。 ee ， 
根据 实际 需要 ， 用 户 也 可 将 子 项 目 列表 提升 级 别 ， 将 其 图 6-6 诬 套 项 目 列表 


转换 为 父 级 的 项 目 列表 。 选 中 子 项 目 列表 的 列表 项 目 ， 然 后 
右 击 鼠 标 ,执行 【格式 】|【 凸 出 】 命 令 ， 实 现 列表 项 目 级 别 的 转换 。 


6.3.3 ”列表 项 目的 样式 


项 目 列表 中 的 文本 内 容 ， 其 格式 设置 与 普通 的 段落 文本 类 似 。 用 户 可 直接 选中 项 目 列表 内 的 文本 ， 
在 【属性 】 检 查 器 中 设置 这 些 文本 的 粗 体 或 斜体 等 功能 。 除 了 设置 项 目 列表 中 文本 的 样式 .Dreamweaver 
还 允许 用 户 设置 项 目 列表 中 列表 项 目 本 身 的 样式 。 在 选中 项 目 列表 的 某 一 个 列表 项 目 后 ， 即 可 在 【属性 】 
检查 器 中 单 击 【 列 表 项 目 】 按 钮 .在 弹出 的 【列表 属性 】 对 话 框 中 设置 整个 列表 或 某 个 列表 项 目的 样式 ， 
如 图 6-7 所 示 。 
































[EEE EE I 
cs DD 无 - M1" 
文本 和 用 天 作文 外 DB 一) 


RS 


图 6-7 列表 属性 
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在 【列表 属性 】 对 话 框 中 ， 人 允许 设置 项 目 列表 的 三 种 属性 。 在 默认 情况 下 ,项 目 列表 的 列表 项 目 符 
号 为 圆 形 的 “项 目 符号 “， 用 户 可 方便 地 设置 整个 列表 或 列表 中 某 个 项 目的 符号 为 “方形 ”， 如 表 6-12 
所 示 。 





表 6-12 项 目 列表 的 属性 







用 于 将 项 目 列表 转换 为 其 他 类 型 的 列表 
定义 项 目 列表 中 所 有 的 列表 项 目 符号 样式 
定义 当前 选择 的 列表 项 目 符号 样式 












综合 实战 





本 章 概 要 性 地 介绍 了 在 网 页 代码 软件 Dreamweaver 中 如 何 为 网 页 添加 文本 ， 为 本 书后 续 的 学 习 打 下 
一 个 坚实 的 基础 。 本 章 从 网 页 文本 概述 开始 . 讲述 了 插入 文本 、 项 目 列表 、 制 作 吸引 人 的 网 站 的 一 些 方 
法 和 相关 技术 ， 接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进行 实践 。 
6.4.1 实战 : 制作 企业 介绍 网 页 

企业 介绍 网 页 是 介绍 企业 基本 情况 、 展 示 企业 文化 、 企 业 团队 精神 以 及 企业 最 新 动态 的 网 页 。 在 设 
计 企 业 介绍 网 页 时 ， 往 往 需要 使 用 大 量 的 文本 来 描述 这 些 内 容 。 本 例 通 过 Dreamweaver 软件 运用 标题 、 
段落 、 特 殊 字符 、 文 本 元 素 等 文本 对 象 ， 实 现 企 业内 容 的 介绍 ， 主 要 练习 输入 文本 、 设 置 标题 、 设 置 段 
落 、 设 置 链 接 、 插 入 特殊 字符 ， 如 图 6-8 所 示 。 








诚信 网 络 


Kith wrt. com 


公司 简介 


我 们 的 团队 





图 6-8 企业 介绍 网 页 


STEP|01 新 建文 档 ， 在 标题 栏 输入 文本 “诚信 网 络 "。 单 击 【属性 】 检 查 器 中 的 【页 面 属性 】 按 钮 ,在 
弹出 的 【页 面 属性 】 对 话 框 中 设置 其 参数 。 然 后 单 击 【 插 入 】 面 板 中 的 HIMLIDiv 按钮 . 创建 作为 header 
的 Div 层 ， 并 设置 其 CSS 样式 .如 图 6-9 所 示 。 
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STEP|02 单 击 Div 按钮 . 创建 作为 content 的 Div 


#header { 


background-image: url(images/qiye_81.png); 


background-repeat: no-repeat; 
height: 8epx; 

width: 1093px; 

padding-top: 40px; 


图 6-9 创建 ID 为 header 的 Div 层 

















层 . 并 设置 其 CSS 样式 属性 .如 图 6-10 所 示 。 








#content { 


background-image: url(images/qiye_02.png); 
background-repeat: repeat; 

height: 869px; 

width: 1063px; 


图 6-10 创建 ID 为 content 的 Div 层 


STEP|03 按照 相同 的 方法 创建 ID 为 footer 的 Div 层 . 并 设置 其 CSS 样式 属性 ， 如 图 6-11 所 示 。 

STEP|04 设置 ul 标签 将 光标 置 于 ID 为 header 的 Div 层 中 ,输入 文本 “首页 ”， 单 击 【属性 】 检 查 器 中 
的 【项 目 列表 】 按 钮 , 出 现 项 目 列表 符号 ， 然后 按 Enter 键 . 出 现下 一 个 项 目 列表 符号 ,然后 再 输入 文本 ， 
以 此 类 推 。 在 标签 栏 选 择 由 标签 . 文本 被 选中 ,然后 定义 其 列表 类 型 、 宽 、 左 边 距 、 填 充 、 块 元 素 的 CSS 





样式 属性 ， 如 图 6-12 所 示 。 


#footer { 
background-repeat: no-repeat; 
height: 96px; 
width: 10603px; 
background-color: #eeeeee; 
Line-height: 20px; 
text-align: center; 
padding-top: 16px; 

} 


图 6-11 创建 ID 为 footer 的 Div 层 


STEP|05 按照 相同 的 方法 ， 在 标签 栏 选择 标签 ， 





中 的 CSS 样式 属性 ， 如 图 6-13 所 示 。 








#header ul { 
width: 56Gpx; 
margin-left: 4 
padding: 6 
display: ock; 
list-style-type: none; 









图 6-12 标签 


定义 其 宽 、 高 、 浮 动 、 边 距 、 填 充 、 块 元 素 、 文 本 居 


STEP|06 选择 文本 “首页 “， 在 【属性 】 检 查 器 中 设置 【链接 】 为 “javascript:void(nulD);“， 在 【标题 】 
中 输入 “首页 "。 然 后 在 标签 栏 选择 a 标签 ,在 CSS 样式 属性 中 设置 其 CSS 样式 属性 。 按 照相 同 的 方法 





依次 在 【属性 】 检 查 器 中 设置 文本 【链接 】 和 【标题 ]】。 将 光标 置 于 人 D 为 content 的 Div 层 中 ,分 别 创建 
ID 为 toppHome、buttomHome 的 Div 层 ,并 设置 其 CSS 样式 属性 ， 如 图 6-14 和 图 6-15 所 示 。 


#header ul Li { 

float: left; 
height: 25px; 
width: 140px; 
text-align: center; 
margin: Opx; 
padding: Opx; 
display: block; 


图 6-13 上 i 标签 


STEP|07 将 光标 置 于 ID 为 topHome 的 Div 层 中 . 


6-16 所 示 。 











#content #topHome { 
height: 386 
width: 





F 


图 6-14 创建 ID 为 topHome 的 Div 层 


创建 IJD 为 gsjj 的 Div 层 并 设置 其 CSS 样式 属性 ， 如 
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#content #topHome #gsjj { 
float: left; 
width: 380px; 





#content #buttomHome 工 height: 380px; 
height: 489px; margin-left: 40px; 
width: 1003px; Color: #FFF; 

} } 

图 6-15 创建 ID 为 buttomHome 的 Div 层 图 6-16 创建 ID 为 gsjj 的 Div 层 


STEP|08 将 光标 置 于 ID 为 gsij 的 Div 层 中 ,输入 文本 “公司 简介 ， 在 【属性 】 检 查 器 中 设置 【格式 】 
为 “标题 1"。 按 Enter 键 . 将 自动 编辑 段落 ， 然 后 输入 文本 。 在 标签 栏 选 择 p 标签 ， 并 定义 其 行 高 、 文 
本 缩 进 的 CSS 样式 属性 ， 如 图 6-17 所 示 。 

STEP|09 将 光标 置 于 JID 为 buttomHome 的 Div 层 中 ,分别 创 建 人 为 leftmain、rightmain 的 Div 层 ， 并 
设置 其 CSS 样式 属性 ， 如 图 6-18 和 图 6-19 所 示 。 























#content #buttomHome #leftmain 工 











float: left; 
width: 3182x; 
margin-right: 200>; 
margin-Left: 500x; 
#content #topHome #gsjj p { height: 3200x; 
Line-height: 2CpDX; margin-top: <32x; 
text-indent: 2em; color: sFFF; 
} 3 
图 6-17 P 标签 图 6-18 创建 ID 为 leftmain 的 Div 层 


STEP|10 然后 在 ID 为 leftmain 的 Div 层 中 输入 文本 ， 在 【属性 】 检 查 器 中 设置 【格式 】 为 “标题 2 。 
按 Enter 键 ， 然 后 输入 文本 ， 以 此 类 推 。 在 标签 栏 选择 p 标签 ， 然 后 定义 其 块 元 素 、 高 、 行 高 、 左 边 距 的 
CSS 样式 属性 ， 如 图 6-20 所 示 。 


#content #buttomHome #rightmain £ 
float: left; 














#content #buttomHome #leftmain p 工 


height: margin-Left: 40px; 
width: 5 Line-height: 22px; 
margin-top: 20pXj height: 225 





color: #FFFj; display: 


图 6-19 创建 ID 为 rightmain 的 Div 层 图 6-20 p 标签 


STEP|11 选择 每 一 个 段落 ， 在 【属性 】 检 查 器 中 设置 【链接 】 为 “javascript:void(null);“， 然 后 在 标签 栏 
选择 a 标签 并 设置 其 CSS 样式 属性 ， 如 图 6-21 所 示 。 

STEP|12 将 光标 置 于 ID 为 rightmain 的 Div 层 中 . 输入 文本 ,设置 文本 “我 们 的 团队 、“ 精 英 团 队 ” 
的 【格式 】 为 “标题 2"。 在 标签 栏 选择 p 标签 . 设置 其 行 高 、 文 本 缩 进 的 CSS 样式 属性 . 如 图 6-22 
所 示 。 
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#content #buttomHome #leftmain p a {€ #content #buttomHome #rightmain p 工 
color: #FFF; 


Line-height: 20px; 


text-decoration: none; text-indent: 2em; 





图 6-21 a 标签 图 6-22 Pp 标签 








STEP|13 将 光标 置 于 ID 为 footer 的 Div 层 中 输入 文本 并 对 文本 进行 换行 。 然后 . 将 光标 置 于 
之 后 , 执行 【插入 】[HTML|【 特 殊 字符 】| 【版权 】 命 令 ， 如 图 6-23 和 图 6-24 所 示 。 
<div id="footer"> 关 于 我 们 | 版 权 声 明 | 合作 联系 | 网 站 地 图 | 友情 链接 


<br /> 





文本 Copyright 








客服 总 机 : 8619-8425665X 8342663x 8344663x 8475562x 8425955x ”周末 /假期 值班 电话 :8141636x 传真 : 8145658x 
企 <br /> 
业 在 线 服务 QQ: 383447636x 4445275559x 385677613x<br /> 


版 权 所 有 : 北京 诚信 网 络 有 限 公司 copyright @ 663-2819 京 ICP 证 656681X </div| [Ea 
</body> 
</html> 

图 6-23 版 权 代码 


关于 我 们 1 版 权 声明 1 合作 联系 1 网 站 地 图 1 友情 链接 
客服 总 机 : 010-8425065X 8342063x 8344063x 8475562x 8425055x 周末 /假期 值班 电话 :8141036x 传真 : 8145058x 企 
业 在 线 服务 QQ: 383447636x 4445275559x 305677613x 
版 权 所 有 : 北京 诚信 了 网 络 有 限 公司 Copyright @ 003-2010 京 ICPHE050081X 


图 6-24 版权 
6.4.2 实战: 设计 人 物 介绍 网 页 
列表 在 网 页 中 有 广泛 的 应 用 ， 例 如， 列举 大 量 同 级 别 内 容 等 。 本 例 就 将 使 用 Dreamweaver 软件 


的 
项 目 列表 技术 ， 设 计 和 制作 一 个 著名 诗人 杜甫 的 个 人 简介 网 页 ， 并 列举 杜甫 的 各 种 作品 ， 主 要 练习 设置 
外 观 属 性 、 插 入 标题 、 插 入 项 目 列表 、 特 殊 字 符 ， 如 图 6-25 所 示 。 














图 6-25 设计 人 物 介绍 网 页 


STEP|01 打开 素材 页 面 “sucaihtml”  ， 在 标题 栏 输入 “诗人 介绍 " 。 然 后 单 塌 





二 【属性 】 检 查 器 中 的 【页 面 
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属性 】 按 钮 ， 在 弹出 的 【页 面 属性 】 对 话 框 中 设置 文字 【大 小 】 为 12px， 如 图 6-26 所 示 。 

STEP|02 分 别 选择 文本 “生平 简介 ”和 “主要 作品 ,设置 【属性 】 检 查 器 中 的 【格式 】 为 “标题 3 。 
“生平 简介 ”栏目 中 ,在 标签 栏 选择 h3 标签 . 通过 CSS 样式 定义 字体 浮动 、 大 小 、 加 粗 、 宽 、 高 等 样式 ， 
如 图 6-27 所 示 。 


















































+ 属性 
再 国 癌 
出 布局 
width : 200 px 
height : 20px 
display : block 
margin : Spx 
5 px 
5 px spx] 
oh 
分 类 外 观 (ss) 
Om 页 面 字体 @); 加 默认 字体 ~ ~ - Spx 
SS KO: 5 
文本 看 色 中: 国 | 
背景 声色 @): 四 | 0 一 
蔡 果 图 像 0) insers/backeround JPG 起 全 一旦 
重复 @)， orepewt ~ 了 
0 一 
证 ibm: 0 区 右边 距 :0 [pe 
Lb: 5 a) ~ Tid:5 ES es : 国 
轩 文本 
font-weight bold 
一 中 让 
图 6-26 【页 面 属 性 】 对 话 杠 图 6-27 h3 标签 


STEP|03 分 别 在 文本 “..….. 贫 病 而 卒 "、“..….. 被 奉 为 「 诗 圣 ]” 后 按 Enter 键 ， 将 自动 编辑 段落 。 然 后 . 
在 标签 栏 选择 p 标签 ， 通过 CSS 样式 定义 文本 缩 进 、 边 距 、 行 高 等 样式 ， 如 图 6-28 所 示 。 

STEP|04 在 “主要 作品 ”栏目 下 方 的 Div 层 中 输入 文本 “ 望 岳 "， 然 后 单 击 【 属 性 】 检 查 器 中 的 【项 目 
列 4 表 】 按 钮 ， 然 后 按 Enter 键 依次 输入 文本 ， 如 图 6-29 所 示 。 
































+ 民 性 
而 日 
沪 市 局 
margin : Spx 
Spx . 望 后 
* 饮 中 八仙 歌 
5 ) * 豆 局 
0 江 时 独步 寻 花 
。 曲 江 二 首 
3 * 其 一 曲 江 二 首 
其 二 曲 江 对 酒 
国 文本 “ 春 望 
二 Bs 
text-indent = : 2 em 。 佳 人 





图 6-28 P 标签 图 6-29 输入 文本 
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STEP|05 在 标签 栏 中 选择 标签， 通过 CSS 样式 定义 该 层 呈 现 块 状 ， 如 图 6-30 所 示 。 
STEP|06 然后 选择 标签 栏 Ii 标签 . 通过 CSS 样式 定义 向 左 浮动 、【 行 高 】 为 16px、 文 本 【对 齐 】 方式 为 
【 左 对 齐 】、 【宽度 】 为 120px 等 样式 .如 图 6-31 所 示 。 
































时 属性 
国 回回 
罚 市 局 
width : 120 px 
+ 属性 和 
中 加 
| 文本 
届 布局 line-height 16 px 
: block text-align 巨 
图 6-30 则 标签 图 6-31 标签 


STEP|07 在 ID 为 footer 的 Div 层 中 .将 光标 置 于 数字 2009 的 前 面 ， 然后 执行 【插入 】|HTML|【 特 殊 字 
符 】|【 版 权 】 命 令 ， 插 入 一 个 版 权 符 号 ， 如 图 6-32 和 图 6-33 所 示 。 


<div > 
忆 风 | 全 加 和 二 | 所 了 | 六 | 和 让 由 | 其 他 内 诗歌 | 古诗 此 | 上 下 二 年 | 历代 入 人才 于 cbr / 

关于 我 们 | 国学 参考 | 商业 合作 | 版 权 声 明 | 联系 方式 <br /> 

&copy;2989 诗词 网 </p> 





图 6-32 ”版权 代码 


风 1 敖 1 领 ! 汉 乐府 1 北朝 民歌 | 唐诗 1 宋词 1 元 曲 | 其 他 古典 诗歌 | 古诗 选 蜂 | 上 下 五 千年 | 历代 诗人 故事 
关于 我 们 | 国学 参考 | 商业 合作 | 版 权 声 明 | 联系 方式 
S2009 诗词 网 














图 6-33 版 权 





若 网 页 是 大 树 ， 那 么 图 像 就 是 花 叶 ， 树 因 花 叶 而 健康 瞩目 ， 网 页 因 图 像 而 丰富 多 彩 。 在 网 页 中 插入 
图 像 可 以 更 好 地 将 该 网 页 中 的 内 容 展 现在 浏览 者 的 眼前 .给 浏览 者 过 目 不 忘 的 效果 ， 但 是 由 于 网 络 的 速 
度 和 效率 问题 ， 放 在 网 页 上 的 图 片 应 该 尽 可 能 小 。 在 之 前 的 章节 中 已 经 介绍 了 如 何 使 用 图 像 设计 软件 
Photoshop 处 理 各 种 网 页 图 像 ， 以 及 制作 网 页 切片 等 知识 ， 那 么 本 章 就 来 介绍 如 何 为 网 页 添加 图 像 。 

本 章 将 详细 介绍 如 何 使 用 Photoshop 为 网 页 插入 图 像 . 以 及 如 何 设置 这 些 图 像 的 属性 等 知识 。 通过 对 
本 章 的 学 习 我 们 可 以 知道 怎样 使 用 Photoshop 为 网 页 添加 图 像 ， 为 制作 网 站 商定 基础 。 
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网 页 设计 与 网 站 建设 自学 经 典 














添加 图 像 








使 用 Dreamweaver， 可 以 方便 地 为 网 页 直接 插入 各 种 图 像 ， 也 可 以 插入 图 像 占 位 符 。 在 网 页 中 插入 
图 像 可 以 有 效 地 提高 网 页 的 观赏 性 ， 并 且 可 以 反映 出 网 站 的 主题 ,使 用 Dreamweaver 可 以 方便 地 为 网 
页 直接 插入 各 种 图 像 。 本 节 主 要 讲述 添加 普通 图 像 、 插 入 图 像 占 位 符 、 添 加 鼠标 经 过 图 像 、 插 入 导航 
条 、 插 入 Fireworks.HIML、 插 入 Photoshop 图 像 。 用 户 通 过 对 本 节 的 学 习 ， 可 以 为 后 期 的 网 站 建设 奠定 
基础 。 


7.1.1 添加 普通 图 像 


在 Dreamweaver 中 ， 将 光标 放置 到 文档 的 空白 位 置 即 可 插入 图 像 ， 执行 【插入 】|【 图 像 】 命 令 ， 或 
按 Cal+Alt+I 组 合 键 ， 即 可 在 弹出 的 【选择 图 像 源 文件 】 对 话 框 中 选择 图 像 ， 单 击 【 确 定 】 按 钮 将 选择 的 
图 像 插入 到 网 页 文档 中 ， 如 图 7-1 一 图 7-3 所 示 。 
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图 7-3 页 面 效 果 
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7.1.2 插入 图 像 占 位 符 


在 设计 网 页 过 程 中 ， 并非 总 能 找到 合适 的 图 像素 材 。 因 此 ，Dreamweaver 允许 用 户 先 插入 一 个 空 的 
图 像 ， 等 找到 合适 的 图 像素 材 后 再 将 其 改 为 真正 的 图 像 。 这 样 的 空 图 像 叫 做 图 像 占 位 符 。 

如 果 在 插入 图 像 之 前 未 将 文档 保存 到 站 点 中 ， 则 Dreamweaver 会 生成 一 个 对 图 像 文件 的 “file://“ 
绝对 路 径 引用 ， 而 非 相对 路 径 。 只 有 将 文档 保存 到 站 点 中 ， Dreamweaver 才 会 将 该 绝对 路 径 转换 为 相对 
路 径 。 

使 用 图 像 占 位 符 可 以 帮助 用 户 在 没有 图 像素 材 之 前 先 为 网 页 布局 。 
插入 图 像 占 位 符 的 方式 与 插入 普通 图 像 类 似 ， 用 户 可 执行 【插入 】| 【图 像 对 象 】| 【图 像 占 位 符 】 命 
在 
【 



































令 . 在 弹出 的 【图 像 占 位 符 】 对 话 框 中 设置 各 种 属性 ， 然 后 单 击 【确定 】 按 钮 。 
图 像 占 位 符 】〗 对 话 框 中 有 多 种 选项 ， 如 表 7-1 所 示 。 


表 7-1 【图 像 占 位 符 】 对 话 框 中 的 选项 

















选项 名 称 
设置 图 像 占 位 符 的 名 称 
设置 图 像 占 位 符 的 宽度 ， 单 位 为 像素 


设置 图 像 占 位 符 的 高 度 ， 单 位 为 像素 
设置 图 像 占 位 符 的 颜色 ， 默 认为 灰色 (#46d6d6) 
设置 图 像 占 位 符 在 网 页 浏览 器 中 显示 的 文本 








在 插入 图 像 占 位 符 后 ， 用 户 可 以 随时 在 Dreamweaver 中 单 击 图 像 占 位 符 ， 在 弹出 的 【选择 图 像 源 文 
件 】 对 话 框 中 选择 图 像 ， 将 其 替换 。 

虽然 插入 的 图 像 占 位 符 可 以 在 网 页 中 显示 ， 但 为 保持 网 页 美观 ， 在 发 布 网 页 之 前 应 将 所 有 图 像 占 位 
符 替换 为 图 像 。 


7.1.3 ”添加 鼠标 经 过 图 像 


鼠标 经 过 图 像 是 一 种 在 浏览 器 中 查看 并 可 在 鼠标 经 过 时 发 生变 化 的 图 像 。 鼠 标 经 过 图 像 实际 上 由 两 
个 图 像 组 成 ， 即 主 图 像 ( 当 首次 载 入 页 面 时 显示 的 图 像 ) 和 次 图 像 ( 当 鼠 标 指针 经 过 主 图 像 时 显示 的 图 
像 )。 鼠 标 经 过 图 像 中 的 这 两 幅 图 像 应 该 大 小 相等 ， 如 果 这 两 幅 图 像 大 小 不 同 ，Dreamweaver 将 自动 调整 
第 2 幅 图 像 的 大 小 匹配 第 1 幅 图 像 。 

Dreamweaver 可 以 通过 可 视 化 的 方式 插入 鼠标 经 过 图 像 。 在 Dreamweaver 中 ,执行 【插入 】|HTML| 
【鼠标 经 过 图 像 】 命 令 ， 即 可 打开 【插入 鼠标 经 过 图 像 】 对 话 框 ,设置 如 图 7-4 所 示 ， 设置 完成 后 ， 单 击 
【确定 】 按 钮 ， 即 可 在 光标 所 在 位 置 插入 鼠标 经 过 图 像 ， 如 图 7-5 所 示 。 

将 光标 移 至 刚 插入 的 鼠标 经 过 图 像 后 ， 使 用 相同 的 制作 方法 ， 可 以 在 页 面 中 插入 其 他 的 鼠标 经 过 图 
像 ， 效果 如 图 7-6 所 示 。 

执行 【文件 】 |【 保 存 】 命 令 ， 保 存 该 页 面 ， 在 浏览 器 中 预览 该 页 面 的 效果 ， 当 鼠标 移 至 设置 的 鼠标 
经 过 图 像 上 时 ， 效果 如 图 7-7 和 图 7-8 所 示 。 
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:网 页 设计 与 网 站 建设 自学 经 典 ::: 











画像 名 次 -Inage2 


同 预 数 让 标 经 过 坪 售 
蔡 换 文本 - 


原始 图 像 :file:///F|/ 设 源 /inages/nav_23.png 
息 标 经 过 图 像 、file:///F1/ 设 源 /inages/nav1_23. png 

















艾 下 时 ,前 往 的 URL: 








图 7-4 【插入 鼠标 经 过 图 像 】 对 话 框 


DW 文件 (RD 编 和 (6) 寺 看 (V) 插入 修改 (M) 
| 代码 J[ 拆 分 ] 











信息 查询 .| 
说 | 鹏 > 总 se 


上 上 


LE 


针 亨 击 网 党 


| 
| 








首页 


图 7-5 页 面 效果 


| 
Yo newcvus 


| 号 360S 骸 新 -ts x 外 








图 7-7 页 面 效 果 


该 对 话 框 中 包含 多 种 选项 ， 可 设置 鼠标 经 过 图 





Dw 文件 (RP 篇 胆 (6， 坦 看 (V， 插入 (1 修改 (M) 
[代码 [ 拆 分 ] 设计 |x| 








i 全 出 击 风 | 冯 中 会 90 





图 7-6 页 面 效 果 


TS | 
BO © fewicvus 


全 3603 航 新 ts xX | 














图 7-8 页 面 效果 


像 的 各 种 属性 ， 如 表 7-2 所 示 。 


表 7-2 鼠标 经 过 图 像 的 各 种 属性 








选项 名 称 


图 像 名 称 和 鼠标 经 过 图 像 的 名 称 ， 可 由 





用 户 自 定义 ， 但 不 能 与 同 页 面 其 他 网 页 对 象 的 名 称 相同 





页 面 加 载 时 显示 的 图 像 
鼠标 经 过 时 显示 的 图 像 









鼠标 经 过 图 像 















预 载 鼠 标 经 过 图 像 选中 该 选项 后 ， 浏 览 网 页 时 原始 图 像 和 鼠标 经 过 图 像 都 将 被 显示 出 来 
营 换 文本 当 图 像 无 法 正常 显示 或 鼠标 经 过 图 像 时 出 现 的 文本 注释 











按 下 时 ， 前 往 的 URL | 单 击 该 图 像 后 转向 的 目标 
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在 制作 网 页 时 .将 网 页 的 导航 栏 设置 为 具有 动态 效果 往往 会 更 具有 吸引 力 ， 而 鼠标 经 过 图 像 就 有 这 
样 的 特性 。 


7.1.4 插入 Fireworks.HTML 











Fireworks 是 除 Photoshop 之 外 的 另 一 种 图 像 处 理 软件 ， 主 要 用 于 处 理 各 种 Web、RIA 应 用 程序 中 的 
图 像 ， 以 及 生成 各 种 简单 的 网 页 脚本 。 

在 Fireworks 中 ， 可 执行 【导出 】 命 令 ， 将 生成 的 网 页 脚本 及 优化 后 的 图 像 保存 为 网 页 。 

Dreamweaver 提供 了 简单 的 功能 ， 人 允许 用 户 直 接 将 Fireworks 生成 的 HIML 代码 和 JavaScript 脚本 插 
入 到 网 页 中 ,增强 了 两 个 软件 之 间 的 契合 度 。 

在 Dreamweaver 中 . 执行 【插入 】| 【图像 对 象 】|Fireworks HTML 命令 . 即 可 在 弹出 的 【插入 Fireworks 
HTML】 对 话 框 中 单 击 【 浏 览 】 按 钮 ， 在 弹出 的 对 话 框 中 选择 Fireworks 导出 的 文件 。 单 击 【 确 定 】 按 钮 
之 后 ， 即 可 将 在 Fireworks 中 制作 的 各 种 网 页 图 像 插入 到 网 页 中 ， 同 时 应 用 一 些 Fireworks 生成 的 脚本 。 


7.1.5 ”插入 Photoshop 图 像 


除了 Fireworks 外 ，Dreamweaver 还 可 以 与 Photoshop 进行 紧密 的 结合 ， 直 接 为 网 页 插入 PSD 格式 的 
文档 。 同 时 ， 还 能 动态 监控 PSD 文档 的 更 新 状态 。 

在 以 往 的 Dreamweaver 版 本 中 , 也 可 插入 Photoshop 的 图 像 , 但 是 需要 将 其 转换 为 可 用 于 网 页 的 各 种 
图 像 . 例如 JPEG、JPG、GIF 和 PNG 等 。 已 插入 网 页 的 各 种 图 像 将 与 源 PSD 图 像 完全 断 开 联系 。 修 改 
源 PSD 图 像 后 ， 用 户 还 需要 将 PSD 图 像 转 换 为 PEG、JPG、GIF 或 PNG 图 像 ， 并 重新 替换 网 页 中 的 
图 像 。 

Dreamweaver 中 借鉴 了 Photoshop 中 的 智能 对 象 概念 ， 即 允许 用 户 插 入 智能 的 PSD 图 像 ， 并 维护 网 
页 图 像 与 其 源 PSD 图 像 之 间 的 实时 连接 。 在 Dreamweaver 中 , 执行 【插入 】| 【图 像 ] 命令 , 在 弹出 的 【 选 
择 图 像 源 文件 】 对 话 框 中 选择 PSD 源 文件 ， 然 后 单 击 【确定 】 按 钮 ， 打开 【图 像 预览 】 对 话 框 。 在 【图 
像 预览 】 对 话 框 的 【选项 】 选 项 卡 中 ， 可 设置 图 像 的 压缩 处 理 设置 ， 包括 设置 压缩 图 像 的 格式 、 品 质 等 
属性 。 在 【图 像 预览 】 对 话 框 的 【文件 】 选 项 卡 中 ， 可 设置 图 像 的 缩放 比例 、 宽 度 、 高 度 和 选择 导出 图 
像 的 区 域 等 属性 。 

在 完成 各 项 设置 后 ， 即 可 单 击 【确定 】 按 钮 ， 将 临时 产生 的 镜像 图 像 保存 ， 并 插入 到 网 页 中 。 此 时 ， 
网 页 中 的 图 像 将 显示 出 智能 对 象 的 标志 。 


及 届 设置 网 页 图 像 属性 


插入 网 页 中 的 图 像 ， 在 默认 状态 下 通常 是 原 图 像 的 大 小 、 颜 色 等 属性 。Dreamweaver 允许 用 户 根据 
不 同 网 页 的 要 求 ， 对 这 些 图 像 的 属性 进行 简单 的 修改 。 本 节 主 要 讲述 图 像 基本 属性 、 设 置 图 像 大 小 、 设 
置 图 像 对 齐 方式 、 设 置 图 像 位 置 。 用 户 通过 对 本 节 内 容 的 学 习 ， 为 后 期 的 网 站 建设 商定 基础 。 


7.2.1 图 像 基 本 属性 


在 Dreamweaver 中 .【 属 性 】 面 板 是 最 重要 的 面板 之 一 。 选 中 不 同 的 网 页 对 象 .【 属 性 】 面 板 会 自动 
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改变 为 该 网 页 对 象 的 参数 。 例 如 , 选中 普通 的 网 页 图 像 .【 属 性 】 面 板 就 将 改变 为 图 像 的 各 属性 参数 。【 属 
性 】 面 板 中 的 各 种 图 像 属 性 ， 如 图 7-9 所 示 。 
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图 7-9 【属性 】〗 面 板 





(1) 图 像 信息 : 在 【属性 】 面 板 的 左上 角 显 示 了 所 选 图 像 的 缩 上 略图， 并且 在 缩 略 图 的 右 侧 显示 该 对 
象 的 信息 ， 如 图 7-10 所 示 。 在 信息 中 可 以 看 到 该 对 象 为 图 片 文件 ， 大 小 为 24KB。 

(2) 卫 : 信息 内 容 的 下 面 有 一 个 卫 文本 框 . 可 以 在 该 文本 框 中 定义 图 像 的 名 称 ， 它 主要 是 为 了 在 肢 
本 语言 (如 JavaScript 或 VBScript) 中 便于 引用 图 像 而 设置 的 。 

(3) Src: 选中 页 面 中 的 图 像 ， 在 【属性 】 面 板 上 的 Src 文本 框 中 可 以 输入 图 像 的 源 文件 位 置 ， 如 图 
7-11 所 示 。 


少 | 
zm | Sre |/imagesipersonl. jpg 


图 7-10 图 像 信息 图 7-11 Src 文本 框 












































(4) 链接 ! 选中 页 面 中 的 图 像 ， 在 【属性 】 面 板 上 的 【链接 】 文 本 框 中 可 以 输入 图 像 的 链接 地 址 。 

(5) 目标 : 图像 超 链接 的 打开 方式 ， 在 【目标 】 下 拉 列 表 中 可 以 设置 图 像 链接 文件 显示 的 目标 位 置 。 

(6) Class: 在 Class 下 拉 列 表 中 可 以 选择 应 用 已 经 定义 好 的 类 CSS 样式 , 或 者 进行 【 重 命名 】 和 【 附 
加 样式 表 】 的 操作 。 

(7) 宽 和 高 ， 图 像 在 网 页 中 的 宽度 和 高 度 ， 默 认 情况 下 单位 为 px。 单 击 【 切 换 尺 寸 约束 】 按 钮 可 以 
约束 图 像 缩放 的 比例 ， 当 修改 图 像 的 宽度 时 ， 则 高 度 也 会 进行 等 比例 的 修改 。 

(8) 替换 ， 单 击 选中 页 面 中 的 图 像 ， 在 【属性 】 面 板 上 的 【替换 】 文 本 框 中 可 以 输入 图 像 的 替换 说 
明文 字 , 如 图 7-9 所 示 。 在 浏览 网 页 时 ， 当 该 图 像 因 丢失 或 者 其 他 原因 不 能 正确 显示 时 ,在 其 相应 的 区 域 
就 会 显示 设置 的 替换 说 明文 字 。 

(9) 标题 ， 用 于 设置 图 像 的 提示 信息 ， 在 网 页 中 ， 将 鼠标 停 在 图 片上 时 会 有 信息 提示 。 

(10) 地 图 : 图 像 上 的 热点 区 域 绘制 工具 。 在 【属性 】 面 板 上 的 【地 图 】 文 本 框 中 可 以 创建 图 像 热点 
集 ， 其 下 面 则 是 创建 热点 区 域 的 三 种 不 同 的 形状 工具 ， 如 图 
7-12 所 示 。 地 图 的 ) [| 

(11) 原始 : 该 选项 用 于 设置 所 选中 图 像 的 低 分 辩 率 图 像 。 

低 分 辩 率 图 像 在 网 页 中 显示 速度 比较 快 ， 可 以 在 高 分 辩 率 图 像 [R| EL] 全 4 
还 没有 下 载 完成 之 前 先 显示 低 分 辩 率 图 像 。 

(12) 编辑 : 选中 页 面 中 相应 的 图 像 . 可 以 在 【编辑 】 属 图 7-12 地 图 
性 后 单 击 相应 的 按钮 对 图 像 进行 编辑 。 

(13) 编辑 左边 第 一 个 按钮 若 凤 画 |， 单 击 该 按钮 ,将 启动 外 部 图 像 编辑 软件 对 所 选中 的 图 像 进行 编辑 
操作 。 






























































(14) 【编辑 图 像 设 置 】 按 钮 嘻 : 单 击 该 按钮 ， 将 弹出 【图 像 优化 】 对 话 框 。 在 该 对 话 框 中 可 以 对 图 
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像 进行 优化 设置 ,在 【 预 置 】 选 项 下 拉 列 表 中 可 以 选择 Dreamweaver 预 设 的 图 像 优化 选项 ， 如 图 7-13 和 


图 7-14 所 示 。 


文件 大 小 : 11 KB 





图 7-13 【图 像 优 化 〗 对 话 框 











6 





图 从 优化 区 ] 


潍 :[““ 周 匡 到 汪 
用 于 照片 的 PNG24 《锐利 细节 ) 

榨 式 : | ”用 于 照片 的 JPEG (连续 色调 ) 
向 标 和 文本 的 PNG8 





高 青 JPEG 以 实现 最 大 兼容 性 
用 于 背景 图 像 的 GIF (图案 ) 
用 于 背景 图 像 的 PNG32 (渐变 》 


这 中 度 : 口 
| 


文件 大 小 : 11KB 











图 7-14 【图 像 优化 〗 对 话 框 


(15) 【从 源 文件 更 新 】 按 钮 : 单 击 该 按钮 ， 在 更 新 智能 对 象 时 网 页 图 像 会 根据 原始 文件 的 当前 内 容 
和 原始 优化 设置 以 新 的 大 小 、 无 损 方式 重新 呈现 图 像 。 


(16) 【裁剪 】 按 钮 : 单 击 该 按钮 ， 图 像 上 会 出 现 虚线 区 域 ， 拖 动 该 虚线 区 域 的 8 个 角 点 至 合适 的 位 


置 ， 按 Enter 键 即 可 完成 图 像 裁 切 操作 ， 如 


】 。 。 伊 特 诺 相 引 定 制 
十 2010 春 30 款 新 款 婚 纱 


图 7-15 裁剪 前 














图 7-15 和 图 7-16 所 示 。 

















四 
LA 

- : 
时 各 


人 仇 村 诺 纱 定制 
ee 征 。 2010 春 3( 王 新 数 婚纱 


我 为 托 纱 插 





图 7-16 裁剪 后 





(17) 【重新 取样 】 按 钮 : 对 已 经 插入 到 页 面 中 的 图 像 进 行 编辑 操作 后 .可 以 单 击 该 按钮 ， 重 新 读 取 





该 图 像 文件 的 信息 。 
(18) 【亮度 】 和 【对 比 度 】 按 钮 : 选中 

















图 像 . 单 击 该 按钮 .弹出 【亮度 /对 比 度 】 对 话 框 ， 可 以 通过 


拖 动 滑 块 或 者 在 后 面 的 文本 框 中 输入 数值 来 设置 图 像 的 亮度 和 对 比 度 ， 如 图 7-17 所 示 。 选 中 【预览 】 复 
选 框 ， 可 以 在 调节 的 同时 在 Dreamweaver 的 设计 视图 中 看 到 图 像 调 节 的 效果 ， 如 图 7-18 所 示 。 
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RE CJ 
| 画面 
xk 


图 7-17 【亮度 /对 比 度 】〗 对 话 框 








图 7-18 亮度 /对 比 度 效 果 


(19) 【 锐 化 】 按 钮 : 选中 图 像 ， 在 【属性 】 面 板 上 单 击 【 锐 化 】 按 钮 ， 弹 出 【 锐 化 】 对 话 框 ， 如 图 
7-19 所 示 。 输 入 数值 或 拖 动 滑 块 调整 锐 化 效果 ， 如 图 7-20 所 示 。 











图 7-19 【 锐 化 〗 对 话 框 


7.2.2 设置 图 像 大 小 


图 7-20 页 面 效 果 


在 图 像 插 入 网 页 后 ， 显 示 的 尺寸 默认 为 图 像 的 原始 尺寸 。Dreamweaver 允许 用 户 自 定义 图 像 的 尺寸 。 
定义 图 像 的 尺寸 有 两 种 方式 ， 一 种 是 单 击 选择 图 像 ， 然 后 通过 拖 描 图 像 右 侧 、 下 方 以 及 右 下 方 的 三 个 控 
制 点 调节 图 像 的 大 小 。 在 拖 动 控制 点 时 ， 用 户 不 仅 可 以 拖 动 某 一 个 控制 点 ， 只 以 垂直 或 水 平方 向 缩放 图 
像 ， 还 可 按 住 ae els ltal laa ed le 所 示 。 













































































图 7-21 设置 图 像 大 小 
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另 一 种 方法 是 在 【属性 】 面 板 中 直接 设置 图 像 的 【高 】 和 【高 】 通过 输入 数值 精确 地 改变 图 像 的 大 
小 ， 如 图 7-22 所 示 。 
用 任何 一 种 方式 修改 图 像 的 大 小 . 在 【属性 】 面板 的 [ 完 ] 和 [高 】 | 宽 Wj271 | 271 | [| Ep 


右 例 都 会 出 现 【切换 尺寸 约束 】 按 钮 。 单 击 该 按钮 ， 可 以 约束 图 像 缩 
放 的 比例 ， 当 修改 图 像 的 宽度 ， 则 高 度 也 会 进行 等 比例 的 修改 。 高 0) 334 | Em 


7.2.3 设置 图 像 位 置 图 7-22 设置 【 完 】 和 【高 


当 图 像 与 文本 混合 排列 时 ,图 像 与 文本 之 间 是 没有 空隙 的 , 这 将 使 页 面 显得 十 分 拥挤 。Dreamweaver 
可 以 帮助 用 户 设置 图 像 与 文本 之 间 的 距离 ,在 【属性 】 面 板 中 ,设置 【垂直 边 距 】 与 【水 平 边 距 】， 可 以 
方便 地 增加 图 像 与 文本 之 间 的 距离 。 在 网 页 中 . 经 常 需要 将 图 像 和 文本 混 排 ， 以 节省 网 页 空间 , 
Dreamweaver 可 以 帮助 用 户 设置 网 页 图 像 在 容器 中 的 对 齐 方 式 。 为 图 像 应 用 对 齐 方 式 . 可 以 使 图 像 与 文本 
紧密 结合 ， 实 现 文本 与 图 像 的 环绕 效果 。 例 如 ， 将 文本 左 对 齐 等 。 


13 综合 实 


本 章 概要 性 地 介绍 了 在 网 页 代码 软件 Dreamweaver 中 如 何 添加 网 页 图 像 ， 为 本 书后 续 的 学 习 打下 一 
个 坚实 的 基础 。 本 章 主要 讲述 两 方面 的 内 容 ， 添 加 图 像 和 设置 网 页 图 像 属性 ,制作 吸引 人 的 网 站 的 一 些 
方法 和 相关 技术 ， 接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进行 实践 。 


7.3.1 实战 : 制作 相册 展示 网 页 


相册 展示 网 页 也 是 一 种 互联 网 中 常见 的 网 页 类 型 。 在 这 种 网 页 中 ， 往 往 展示 了 个 人 或 一 些 专业 摄影 

师 拍 摄 的 各 种 照片 ， 很 多 摄影 师 使 用 这 种 网 页 来 宣传 自我 的 形象 。 本 例 通 过 Dreamweaver 软件 运用 插入 

图 像 、 插入 背景 图 像 、 插 入 Photoshop 图 像 等 功能 , 制作 一 个 婚纱 摄影 师 的 相册 网 页 , 主要 练习 插入 图 像 、 
插入 背景 图 像 、 插 入 Photoshop 图 像 ， 如 图 7-23 所 示 。 

最 大 的 网 上 结婚 展 ， 欢 迎 每 一 位 新 人 


合集 拉 因 六 
可 生 央 幼名 灯 1 
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图 7-23 制作 相册 展示 网 页 
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:3 网 页 设计 与 网 站 建设 自学 经 典 ::: 








STEP|01 新 建文 档 ， 在 标题 栏 输入 文字 “婚纱 相册  。 单 击 【属性 】 检 查 器 中 的 【页 面 属性 】 按 钮 ， 在 
弹出 的 【页 面 属性 】 对 话 框 中 设置 其 参数 ， 如 图 7-24 所 示 。 











ET 





攻 国 zibo:0 区 











区 了 下 边 史 0: 0 “区 








CE Cm 


图 7-24 【页 面 属性 〗 对 话 框 


STEP|02 然后 单 击 【 插 入 】|IHTMLIDiv 按钮 ,创建 ID 为 header 的 Div 


图 7-25 一 图 7-30 所 示 。 


















































HTML 了 ID: Muder 9 
回 Div : [ET ER 
Inage | 
图 7-25 【插入 】|HTMLIDiv 按钮 图 7-26 【插入 Div】 对 话 框 
过 去 轩 类 型: ED 
为 css 规则 造反 上 下 文 造反 各 内 型 。 二 和 方 相 
= | maam :1 [ED mo 了 
过 择 加 名 称 : | wign00 :EGG -| cov 吕 
hk | ad Nereis 
i 李 ene) ”ep 
i | Top@) -ee Top (0) = 区 
拓展 元 二 1 Hight Oy) ”| [px Nght(6) -| = 
Botton®) -| 7 pm) 6 
Lft0) 3 Left (F) |) 
不 太 具 伟 更 具体 
规则 定义 : 
过 反 宝 X 扣 mb9 位 置 
一 一 一 wn] | | | Er WE EGR CER] 



































图 7-27 【新 建 CSS 规则 】〗 对 话 框 
#header 蔷 
height: 263px; 
width: 16063px; 
} 
图 7-29 CSS 样式 代码 





图 7-28 【〖#header 的 CSS 规则 定义 〗 对 话 框 
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图 7-30 页 面 效 果 
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STEP|03 在 ID 为 header 的 Div 层 中 分别 灸 套 D 为 logo、banner 的 Div 层 . 并 设置 其 CSS 样式 ， 如 


图 7-31 所 示 。 
STEP|04 然后 将 光标 置 于 ID 为 logo 的 Div 层 中 . 单 击 【 插 入 】 面 板 中 的 【图 像 】 按 钮 如 图 7-32 








所 示 。 
时 全 三 及 < 05 ， 制作 她 装 时 尚 页 ，images | 他 | Rs mages 岂 
组 织 ”新建 文件 到 
1 
#1logo { 





display: block; 





float: left; Re 本 
height: 263px; Wa N Dt 
width: 29gpx; 
} 尘 计算 机 3 4 5 
#banner { 角 (Ca > | Er 7 
display: block; 相对 于 [Xe 
float: left; Eee- 一 一 一 一 
文件 名 (N) 图 你 文件 (gif"jpg:jpeg"P ~ 


height: 263px; 
width: 891pxj3 














[aE 录 | [ 克 取消 

















} 


图 7-31 CSS 样式 代码 


STEP|05 在 弹出 的 【选择 图 像 源 文件 】 对 话 框 中 选择 图 像 “logo.psd” ， 单 击 【 确 定 】 按 钮 后 ,弹出 【图 


像 预览 】 对 话 框图 像 格 式 转换 为 “jpg ， 单 击 【 
按照 相同 的 方法 . 在 ID 为 banner 的 Div 层 中 插入 


图 7-32 【选择 图 像 源 文件 】 对 话 杠 








确定 】 按 钮 ， 弹 出 【保存 Web 图 像 】 对 话 框 进行 保存 。 
图 像 “bannerpsd 。 单 击 【插入 Div 标签 】 按 钮 .创建 





ID 为 content 的 Div 层 ， 并 设置 其 CSS 样式 ， 如 图 7-33 所 示 。 








STEP|06 然后 在 该 Div 层 中 分 别 嵌 套 ID 为 leftmain .rightmaim 的 Div 层 , 并 设置 其 CSS 样式 ,如 图 7-34 


所 示 。 

#content £{ 
height: 439pxj 
width: 1993pxj; 

了 


图 7-33 CSS 样式 代码 


#leftmain { 
background-image: urL(imagesyh_c3.png); 
float: left; 
height: 419px; 
width: 198px; 
} 
#rightmain { 
background-image: url(images/h_64.png)s 
float: left; 
height: 419px; 
width: 8&Clpx; 


图 7-34 CSS 样式 代码 
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STEP|07 将 光标 置 于 ID 为 leftmain 的 Div 层 中 . 单 击 【 插 入 】| HTML | Table 按钮 . 在 弹出 的 Table 对 









































话 框 中 设置 【 行 数 】 为 8、【 列 】 为 1、 【表格 宽 度 】 为 “190 像素 "、【 边 框 粗细 】 为 “0 像素 "、【 单 元 格 
边 距 】 和 【单元 格 间距 】 为 0， 如 图 7-35 和 图 7-36 所 示 。 
Table LE | 
表格 大 小 
行 数 : 8 到 1 
要 格 宽度 : 190 [像素 x] 
边框 粗 纸 : 0 你 未 
单元 格 边 距 : 0 ”图 
单元 格 间距 : 0 图 
标题 
加 二 顶部 两 者 
茜 助 功 楷 
标题 
盾 要 < 
[ 动 |] LE ] 
图 7-35 【插入 】〗】| HTML | Table 按钮 图 7-36 ”Table 对 话 框 





STEP|08 选择 表格 , 设置 【属性 】 检 查 器 中 的 【对 齐 】 方式 为 【 右 对 齐 】， 第 1 行 ~ 第 5 行 单元 格 的 【水 





平 】 对 齐 方式 为 【 左 对 齐 】、 【垂直 】 对 齐 方 式 为 【底部 】, 设置 第 6 行 一 第 8 行 的 【水 平 】 对 齐 方式 为 【 居 
中 对 齐 】]。 设 置 第 1 行 【 格 式 】 为 标题 2， 并 输入 文字 ， 并 在 每 个 单元 格 中 输入 相应 的 文本 ， 在 【属性 】 


检查 器 中 设置 第 1 行 高 度 为 94、 第 2 行为 43、 第 3 行为 44、 第 4 行为 40、 第 5 行为 42、 第 6 行为 40、 





第 7 行为 46、 第 8 行为 534， 如 图 7-37 一 图 7-39 所 示 。 

































































《》 hm。 目标 规则 “新 内 联 样式 > 四 EEC 本 四 = 匡 圣 酒 下 @ 
妈 css] 万顷 遇 风 _] [Css pesieer] | 大 小 6) 12 -ee 节 
单元 格 妈 攻守 更 四 不 搞 行 9) 门 。 背 景 杨 色 (6) 全 | CR 
口 半 ” 委 直 Wm)[ 反 部 ”| 高 00 标题 @) 门 
图 7-37 第 1 行 ~ 第 5 行 单元 格 的 设置 
属性 
发 >》MTIL 目标 规 风 “条 内 联 样式 > ”| 字体 和】 名 默认 字体 二 下 ~ 医 对 性 如 @ 
bh css 编辑 规则 ] [ CSS Desiener ] | 大 小 BS) 12 | | 世 
EE 水 平 吕 [居中 对 齐 <] 宽 轨 | ”不 搞 行 0) 站。 背景 天色 多) 三 | Ce 
一 口 放 要 站) 加 -| 高 9 标题 吕 门 
图 7-38 第 6 行 ~ 第 8 行 单元 格 的 设置 
STEP|09 将 光标 置 于 ID 为 tightmain 的 Div 层 中 ,分别 谋 套 ID 为 bigPic、smallpic 的 Div 层 . 设置 其 








CSS 样式 ， 如 图 7-40 所 示 。 
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we : #bigPic { 
: : float: left; 

height: 419px; 

width: 300pxj 









上 
#smallPic { 
float: left; 
height: 419px; 
E 伊 村 诺 业 幼 定制 width: 350pxj; 
乔 : 2010 春 3 未 新 款 婚纱 ~ margin-left: 20pxj 
; 了 
图 7-39 页 面 效果 图 7-40 CSS 样式 代码 


STEP|10 按照 相同 的 方法 ， 将 光标 置 于 ID 为 bigPic 的 Div 层 中 ,分 别 谋 套 ID 为 bigTitle、bPic 的 Div 
层 . 并 设置 其 CSS 样式 ， 如 图 7-41 所 示 。 

STEP|I1TI 将 光标 置 于 ID 为 bigTitle 的 Div 层 中 输入 文本 。 在 ID 为 bPic 的 Div 层 中 插入 图 像 "personlpsd”， 
如 图 7-42 所 示 。 




















#bigTitle { 
font-size: 20px; 
font-weight: bold; 
Color: #602624; 
display: block; 
padding-top: 20px; 
padding-right: 39px; 
padding-bottom: 20px; 
padding- left: 30px; 

了 

#bPic { 
text-align: center; 





了 
图 7-41 CSS 样式 代码 图 7-42 页 面 效 果 


STEP|12 在 了 为 smallPic 的 Div 层 中 . 插入 一 个 3 行 x1 列 、【 宽 】 为 “350 像素 ”的 表格 , 并 在 【属性 】 
检查 器 中 进行 设置 ， 如 图 7-43 所 示 。 
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Bag 





属性 
EE| 天 行 外 3 | 席 ) 350 | 急 素 He J* ~] Qass 无 - 


jom 








图 7-43 【属性 】 对 话 框 


STEP|13 在 第 1、3 行 输入 文本 . 第 2 行 谋 套 一 个 2 行 x2 列 、【 宽 】 为 “350 像素 ”的 表格 。 然 后 在 【 属 
性 】 检 查 器 中 .设置 第 1 行 单元 格 【水 平 】 对 齐 方式 为 【 右 对 齐 】 【高 】 为 50. 第 3 行 【 格 式 】 为 “ 标 
题 4”. 【水 平 】 对 齐 方式 为 【居中 对 齐 】、 【高 】 为 40， 第 2 行 插入 的 表格 【填充 】 为 4、【 间 距 】 为 10、 
【 边 距 】 为 0， 如 图 7-44 一 图 7-47 所 示 。 
























































《mL | 。 目标 规则 body, vd 小 "soost -| -| -En ® 
本 css 编 加 规 网 [ SS Desieer ] 大 小 G) 12 “区 >] 口 | [3 
下 单元 格 水平)[ 右 对 齐 “~] 宽 0)。 | 不 换行 中 ) 门 。 从 果蔬 色 GG) 厂 -| | 

一 三 其 要 二 中 革 A-] 高 0[ 多 标题 0) 口 





图 7-44 第 1 行 单元 格 设置 














> mL 目标 规则 《 祈 内 联 样式 > ”| 字体 0】 名 败 认 字体 - - ~ 医 圣 酒量 @ 
MR [ESsaesee | A ~ (es) J 到 
到 M8 好 om FM) RR -Ce 

| 机 四 站 E 





图 7-45 第 3 行 单元 格 设置 


























图 7-46 第 2 行 插入 的 表格 


首页 > 婚纱 摄影 > 格调 视觉 





图 7-47 页 面 效 果 
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STEP|14 在 文档 最 底部 .创建 作为 footer 的 Div 标签 ， 并 设置 其 CSS 样式 .如 图 7-48 所 示 。 
STEP|15 然后 . 将 光标 置 于 footer 的 Div 标签 中 .输入 版 权 信息 内 容 的 文本 ， 完 成 版 尾部 分 内 容 的 制作 
过 程 ， 如 图 7-49 所 示 。 
#footer { 
Line-height: 26px; 
background- 
text-align: 














相爱 婚纱 摄影 版 权 所 有 
Copyright © 2005 All rights reserved 





图 7-48 CSS 样式 代码 图 7-49 页 面 效 果 
STEP|16 在 制作 完成 版 尾部 分 的 内 容 后 ， 即 可 完成 整个 相册 展示 网 页 的 制作 。 保 存 网 页 ， 然 后 使 用 网 页 
浏览 器 查看 最 终 的 页 面 效果 。 
7.3.2 ”实战 : 制作 图 像 导 航 条 


使 用 Dreamweaver， 用 户 可 以 方便 地 制作 出 精美 的 网 页 图 像 导航 条 。 在 制作 图 像 导 航 条 时 ， 需 要 使 
用 到 Dreamweaver 的 【插入 鼠标 经 过 图 像 】 功 能 ， 依 次 将 导航 条 各 按钮 的 各 种 状态 图 像 插入 到 相应 的 位 
置 ， 主 要 练习 插入 背景 图 像 、 插 入 图 像 、 插 入 光标 经 过 图 像 ， 如 图 7-50 所 示 。 























图 7-50 制作 图 像 导 航 条 


STEP|01 新 建文 档 ， 在 标题 栏 输入 文本 “ 龙 文 印象 ” ， 然 后 在 【属性 】 检 查 器 中 单 击 【页 面 属性 】 按 钮 ， 
在 弹出 的 【页 面 属性 】 对 话 框 中 设置 【背景 图 像 ]、 【重复 】 以 及 4 个 边 距 ， 如 图 7-51 所 示 。 














外 观 CSS) 





页 面 字体 F) 器 默认 字体 > ~ ~ 
大 小 G) M1: Es 

文本 着 色 0): 辐 | 

背景 疗 色 9): 辐 | 

戎 暴 图 像 0) :insers/be jpe ES 


重 夏 四 :AGO 


左边 距 吕 : 0 px 右边 距 8): 0 区 -了 


上 边 距 D): 0 [mw Tibo:0 (mez) 




















图 7-51 【页 面 属 性 】 对 话 框 
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网 页 设计 与 网 站 建设 自学 经 典 ::: 


网 页 设计 与 网 站 建设 自学 经 典 





STEP|02 单 击 【 插 入 】 | HTML | Div 按钮 . 创建 力 为 nav 的 Div 层 ， 并 在 弹出 的 【jav 的 CSS 规则 
定义 】 对 话 框 中 设置 其 CSS 样式 .如 图 7-532 一 图 7-54 所 示 。 














揪 入 : | 在 插入 点 











































































































不 太 具体 更 具体 
《二 文档 ) ET 
图 7-53 【新 建 CSS 规则 〗 对 话 框 
分 类 方 本 
WidthkG) : 95 [me Poata) - 
Neight 00 ; 61 ~ 区- 了 aeec) - 
Padding Margin 
贺 全 部 相同 ) 固 全 部 相同 0) 
对 TopD) : ww 本 ~ Top0) :15 [pm 
Right (R) -||px =| Right() : suto vv [px 
Botton (8) -| -| Bottonl) : 125 [px = 
Left OD) “ilps ~ LeftE) : auto vlpx ~ 
[于 助 00 确定 取消 应 用 OA) 























图 7-54 【#0av 的 CSS 规则 定义 〗 对 话 框 
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:: 第 7 章 添加 网 页 图 像 





STEP|03 将 光标 置 于 ID 为 nav 的 Div 层 中 . 执行 【插入 】| 【图 像 ] 命令 . 在 弹出 的 【选择 图 像 源 文件 】 
对 话 框 中 选择 图 像 nav_ 22， 单 击 【 确 定 】 按 钮 ， 如 图 7-55 所 示 。 

















OO , weesms , imge: = | MR mages Pp 
组 织 > 。 新 建文 件 闪 >- | 国 | © 
中 和 - 本 
下 页 
码 RE 组 医 U 一 | yn 
bg nav_22 nav_23 | 
于 计 算 机 
色 和 a 人 创意 
全 软件 (Dj 
至 | mav_24 nav_25 nav_26 
DAE) | 
aN) 四 本 外 
中 文 作 (G9 li mci sg 
ee = es 
文件 各 (N): nav_22 > IH (gif"jpg;"jpeg:p ” 
[ama] we ] (ww) 











图 7-55 【选择 图 像 源 文件 】〗 对 话 框 
STEP|04 将 光标 置 于 图 像 后 ， 然 后 单 击 【 插 入 】 | HTML | 【鼠标 经 过 图 像 】 按 钮 ， 在 弹出 的 【插入 鼠 
标 经 过 图 像 】 对 话 框 中 ,设置 【原始 图 像 ] 【鼠标 经 过 图 像 】 【替换 文本 】、【 按 下 时 ， 前 往 的 URL】 等 
属性 ， 如 图 7-56 一 图 7-58 所 示 。 


修改 (M) 相 式 (0)】 命令 (站 点 (S) 窗口 (W) 帮助 (HH 
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图 7-56 【插入 】〗 | HTML | 【鼠标 经 过 图 像 】 
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全 和 闲 下 5 
原始 图 像 、inages/nav_23. png Em 
息 标 经 过 图 像 ”inages/nav1_23. png Ek... 
辐 预 台 银 标 经 过 图 像 
车 换文 本 : ] ~ 
按 下 时 ,前往 的 URL: 六 (Wk...) 











图 7-57 【插入 鼠标 经 过 图 像 〗】 对 话 杠 





图 7-58 页 面 效果 


STEP|05 用 同样 的 方式 ,为 导航 条 中 其 他 6 个 同类 的 按钮 添加 按钮 的 基本 图 像 , 并 添加 鼠标 经 过 按钮 时 
显示 的 【鼠标 经 过 图 像 】 等 几 个 属性 。 在 为 所 有 导航 条 按钮 添加 原始 图 像 、 鼠 标 经 过 图 像 ， 并 设置 替换 
文本 之 后 ， 即 可 完成 整个 图 像 导 航 条 的 制作 。 使 用 网 页 浏览 器 浏览 图 像 导 航 条 所 在 的 页 面 ， 用 户 可 以 使 
用 鼠标 滑 过 导航 条 中 的 各 个 按钮 查看 光标 滑 过 的 效果 。 
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:网 页 设计 与 网 站 建设 自学 经 典 :::: 


链接 是 网 页 非常 重要 的 一 部 分 ， 可 以 用 文字 、 图 像 、 动 画 、 视 频 等 做 链接 来 导航 到 不 同 的 网 页 。 在 
网 页 中 ， 超 链接 可 以 帮助 用 户 从 一 个 页 面 跳 转 到 另 一 个 页 面 ， 也 可 以 帮助 用 户 跳 转 到 当前 页 面 指定 的 标 
记 位 置 。 可 以 说 , 超 链接 是 连接 网 站 中 所 有 内 容 的 桥梁 . 是 网 页 最 重要 的 组 成 部 分 。Dreamweaver 提供 了 
多 种 创建 和 编辑 超 链接 的 方法 ,设计 者 可 以 通过 可 视 化 界面 为 网 页 添加 各 种 类 型 的 超 链接 。 

本 章 主要 讲述 超级 链接 类 型 、 插 入 链接 、 绘 制 热点 区 域 、 编 辑 热点 区 域 和 综合 实战 。 通 过 对 本 章 的 
学 习 ， 我 们 可 以 知道 怎样 创建 网 页 中 的 链接 .为 制作 网 站 黄 定 基础 。 
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超级 链接 类 型 





在 互联 网 中 .几乎 所 有 的 资源 都 是 通过 超 链 接连 接 在 一 起 的 。 合 理 使 用 的 超 链接 可 以 使 网 页 更 有 条 
理 和 灵活 性 .也 可 以 使 用 户 更 方便 地 找到 所 需 的 资源 。 根 据 超 链接 的 载体 .可 以 将 超 链接 分 为 两 大 类 . 
即 文本 链接 和 图 像 链接 。 

文本 链接 是 以 文本 作为 载体 的 超 链接 。 当 用 户 单 击 超 链接 的 载体 文本 时 ， 网 页 浏览 器 将 自动 跳 转 到 
链接 所 指向 的 路 径 。 在 各 种 网 页 浏览 器 中 ,文本 链接 包括 4 种 状态 .如 下 所 示 。 

(1) 普通 : 最 普通 的 超 链接 状态 ， 所 有 新 打开 的 网 页 中 超 链接 最 基本 的 状态 。 在 正 浏览 器 中 ,默认 
显示 为 蓝 色 带 下 画 线 。 

(2) 光标 滑 过 : 当 光 标 滑 过 该 超 链接 文本 时 的 状态 。 虽 然 多 数 浏览 器 不 会 为 光标 滑 过 的 超 链接 添加 
样式 ， 但 用 户 可 以 对 其 进行 修改 ， 使 之 变 为 新 的 样式 。 

(3) 鼠标 单 击 : 当 鼠 标 在 超 链接 文本 上 按 下 时 ， 超 链接 文本 的 状态 。 在 正 浏览 器 中 ,默认 为 无 下 画 
线 的 橙色 。 
(4) 已 访问 : 当 鼠 标 已 单 击 访问 过 该 超 链接 ， 且 在 浏览 器 的 历史 记录 中 可 找到 访问 记录 时 的 状态 。 
在 正 浏 览 器 中 ， 默 认为 紫红 色 带 下 画 线 。 
以 图 像 为 载体 的 超 链 接 . 叫做 图 像 链接 。 在 正 浏览 器 中 , 默认 会 为 所 有 带 超 链接 的 图 像 增加 一 个 2px 
宽 的 边框 。 如 果 该 超 链接 已 被 访问 过 ， 且 可 在 浏览 器 的 历史 记录 中 查 到 访问 记录 , 则 正 浏览 器 默认 会 为 
该 图 像 链 接 添加 一 个 紫红 色 的 2px 边框 ,如 图 8-1 所 示 。 
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图 8-1 超级 链接 类 型 


多 大 插入 链接 


插入 链接 是 制作 网 站 的 重要 一 环 .通过 插入 链接 我 们 可 以 从 当前 Web 页 定义 的 位 置 跳 转 到 其 他 位 置 . 
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. 





还 可 以 获得 不 同形 态 的 服务 ， 如 文件 传输 、 资 料 查询 、 电 子 函件 、 远 程 访问 等 。 本 节 主要 讲述 插入 文本 
和 图 像 链接 、 插 入 邮件 和 锚 记 链接 。 用 户 通 过 对 本 节 的 学 习 ， 为 后 期 的 网 站 建设 奠定 基础 。 


8.2.1 插入 文本 和 图 像 链 接 


创建 文本 链接 时 ， 首 先 应 选择 文本 .然后 在 【插入 】 面 板 中 单 击 Hyperlink 按钮 ， 打开 【超级 链接 ] 
对 话 框 如 图 8-2 所 示 。 












































图 8-2 【起 级 链接 〗 对 话 框 
Hyperlink 对 话 框 中 包含 6 种 参数 设置 ， 如 表 8-1 所 示 。 
表 8-1 Hyperlink 对 话 框 中 的 6 种 参数 设置 














显示 在 设置 超 链接 时 选择 的 文本 ， 是 要 设置 的 超 链接 文本 内 容 
显示 链接 的 文件 路 径 ， 单 击 后 面 的 【文件 】 按 钮 ， 可 以 从 打开 的 对 话 框 中 选择 要 链接 的 文件 
单 击 其 后 面 的 下 三 角 按钮 ， 在 弹出 的 下 拉 列 表 中 可 以 选择 链接 到 的 目标 框架 
显示 光标 经 过 链接 文本 所 显示 的 文字 信息 
在 其 中 设置 键盘 快捷 键 以 便 在 浏览 器 中 选择 该 超级 链接 
设置 Tab 键 顺序 的 编号 












Tab 键 索引 


在 Hyperlink 对 话 框 中 ， 根 据 需求 进行 相关 的 参数 设置 ， 然 后 单 击 右 侧 的 【确定 】 按 钮 即 可 。 此 时 ， 
被 选中 的 文本 将 变 成 带 下 画 线 的 蓝 色 文字 。 

除 此 之 外 .用户 在 Dreamweaver 中 执行 【插入 】|Hyperlink 命令 也 可 以 打开 Hyperlink 对 话 框 ,对 文 
本 进行 设置 .添加 超级 链接 。 在 为 文本 添加 超级 链接 后 ,用 户 还 可 在 【属性 】 面 板 中 选择 HIML 选项 卡 . 
然后 修改 【链接 】 右 侧 的 输入 文本 框 ， 对 超级 链接 的 地 址 进行 修改 . 或 修改 超级 链接 的 【标题 】 【目标 】 
等 属性 。 单 击 【属性 】 检 查 器 的 【页 面 属性 】 按 钮 ， 在 弹出 的 对 话 框 中 可 以 修改 网 页 中 超级 链接 的 样式 。 

在 Dreamweaver 中 ， 除 了 允许 用 户 为 文本 添加 超级 链接 外 ， 还 允许 用 户 为 图 像 添加 超级 链接 。 为 图 
像 添加 链接 ， 可 先 选中 图 像 ， 然 后 在 【属性 】 面 板 中 【链接 】 右 侧 的 输入 文本 框 中 输入 超 链接 的 地 址 。 

在 为 图 像 添加 超级 链接 后 ， 即 可 看 到 超级 链接 所 拥有 的 蓝 色 边框 。 通 常用 户 可 以 在 【属性 】 面 板 的 
【边框 】 右 侧 输入 文本 框 中 设置 0， 以 消除 该 边框 。 


8.2.2 插入 邮件 和 锚 记 链接 


电子 邮件 链接 也 是 超 链接 的 一 种 形式 。 与 普通 的 超 链接 相 比 ， 当 用 户 单 击 电子 邮件 链接 后 ， 打 开 链 
接 的 并 非 网 页 浏览 器 .而 是 本 地 计算 机 的 邮件 收发 软件 。 选 中 需要 插入 电子 邮件 地 址 的 文本 ， 然后 ,在 
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【插入 】 面 板 中 单 击 【 电 子 邮件 链接 】 按 钮 ， 打 开 【 电 子 邮 件 链接 】 对 话 框 。 然 后 ， 在 【电子 邮件 】 文 本 
框 中 输入 电子 邮件 地 址 ， 如 图 8-3 所 示 。 

与 插入 其 他 类 型 的 链接 类 似 ， 用 户 也 可 以 执 人 
行 【 插 入 】| 【电子 邮件 链接 】 命 令 ， 打 开 【 电 子 
邮件 链接 】 对 话 框 ， 进 行 相关 的 设置 。 

锚 记 链接 是 网 页 中 一 种 特殊 的 超 链接 形式 。 
普通 的 超 链接 只 能 链接 到 互联 网 或 本 地 计算 机 中 
的 某 一 个 文件 ， 而 错 记 链接 则 常常 被 用 来 实现 到 
特定 的 主题 或 者 文档 顶部 的 跳 转 链接 。 创 建 锚 记 图 8-3 插入 邮件 链接 
链接 时 ， 首 先 需要 在 文档 中 创建 一 个 命名 错 记 作为 超 链接 的 目标 。 将 光标 放置 在 网 页 文档 的 选 定位 置 ， 
单 击 【插入 】 面 板 中 的 【命名 错 记 】 按 钮 ， 在 打开 的 【命名 错 记 】 对 话 框 输入 锚 记 的 名 称 。 

在 创建 命名 锚 记 之 后 ， 即 可 为 网 页 文档 添加 锚 记 链接 。 添 加 错 记 链 接 的 方式 与 插入 文本 链接 相同 ， 
执行 【插入 〗】|【 超 级 链接 】 命 令 ， 在 打开 的 【超级 链接 】 对 话 框 中 输入 以 井 号 “#” 开 头 的 锚 记 名称 。 由 
于 创建 的 错 记 链接 属于 当前 文档 内 部 ， 因 此 可 以 将 链接 的 目标 设置 为 ” self 。 


,天国 给 和 执 sE 域 


热点 链接 是 一 种 特殊 的 超 链接 形式 ， 又 被 称 作 热 区 链接 、 图 像 地 图 ， 其 作用 是 为 图 像 的 某 一 部 分 添 
加 超 链接 ， 实 现 一 个 图 像 多 个 链接 的 效果 。 本 节 主 要 讲述 矩形 热点 链接 、 圆 形 热点 链接 和 多 边 形 热点 链 
接 。 用 户 通过 对 本 节 的 学 习 ， 为 后 期 的 网 站 建设 商定 基础 。 
8.3.1 和 矩形 热点 链接 

矩形 热点 链接 是 最 常见 的 热点 链接 在 文档 中 选择 图 像 ， 单 击 【 属 性 】 检 查 器 中 的 【矩形 热点 工具 】 
按钮 ， 当 鼠标 光标 变 为 十 字形 “十 ”之 后 ， 即 可 在 图 像 上 绘制 热点 区 域 。 在 绘制 完成 热点 区 域 后 ， 用 户 
即 可 在 【属性 】 检 查 器 中 设置 热点 区 域 的 各 种 属性 ， 包括 链接 、 目 标 、 替 换 以 及 地 图 等 ， 如 图 8-4 所 示 。 
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8-4 矩形 热点 链接 
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其 中 . 【地 图 】 参 数 的 作用 是 为 热 区 设置 一 个 唯一 的 D， 以 供 脚本 调用 . 
8.3.2 圆 形 热点 链接 


Dreamweaver 人 允许 用 户 为 网 页 中 的 图 像 绘制 椭圆 形 热点 链接 。 在 文档 中 选择 图 像 ， 然 后 在 【属性 】 
检查 器 中 单 击 【 圆 形 热点 工具 】 按 钮 器， 当 和 鼠标 光标 转变 为 十 字形 “十 ”后 . 即 可 绘制 圆 形 热点 链接 . 
如 图 8-5 所 示 。 
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图 8-5 圆 形 热点 链接 


与 矩形 热点 链接 类 似 ， 用 户 也 可 以 在 【属性 】 检 查 器 中 对 圆 形 热点 链接 进行 编辑 。 


8.3.3 ”多边 形 热点 链接 


对 于 一 些 复杂 的 图 形 ，Dreamweaver 提供 了 多 边 形 热点 链接 ， 帮 助 用 户 绘制 不 规则 的 热点 链接 区 域 。 
在 文档 中 选择 图 像 ， 然 后 在 【属性 】 检 查 器 中 单 击 【 多 边 形 热点 工具 】 按 钮 呵 ， 当 鼠标 光标 变 为 十 字形 
“十 ”后 , 即 可 在 图 像 上 绘制 不 规则 形状 的 热点 链接 。 

其 绘制 方法 类 似 一 些 矢 量 图 像 绘制 软件 (例如 Flash 等 ) 中 的 钢笔 工具 。 首 先 单 击 鼠 标 ,在 图 像 中 给 
制 第 一 个 调节 点 。 然后. 继续 在 图 像 上 绘制 第 2 个 、 第 3 个 调节 点 . Dreamweaver 会 自动 将 这 些 调节 点 连 
接 成 一 个 闭合 的 图 形 ， 如 图 8-6 所 示 。 



























































图 8-6 多 边 形 热 点 链接 
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当 不 再 需要 绘制 调节 点 时 . 右 击 鼠标 .退出 多 边 形 热点 绘制 状态 。 此 时 .鼠标 光标 将 变 回 普通 的 样 
式 ， 如 图 8-7 所 示 。 
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图 8-7 ”多边形 热点 链接 


也 可 以 在 【属性 】 检 查 器 中 单 击 【 指 针 热 点 工具 】 按 钮 内 |， 同 样 可 以 退出 多 边 形 热点 区 域 的 绘制 。 


于 国 编辑 热点 区 域 


在 绘制 热点 区 域 之 后 ， 可 以 对 其 进行 编辑 Dreamweaver 提供 了 移动 热点 区 域 位 置 、 对 齐 热点 区 域 、 
调节 热点 区 域 大 小 和 设置 重合 热点 区 域 层次 等 多 种 编辑 热点 区 域 的 方式 。 本 节 主 要 讲述 移动 和 对 齐 热点 
区 域 、 调 节 热点 区 域 大 小 和 设置 重合 热点 区 域 层次 。 用 户 通 过 对 本 节 的 学 习 ， 为 后 期 的 网 站 建设 奠定 
基础 。 


8.4.1 移动 和 对 齐 热点 区 域 


图 像 中 的 热点 区 域 ， 其 位 置 并 非 固定 不 可 变 的 .用户 可 以 对 其 进行 更 改 。 在 文档 中 选择 图 像 后 ， 单 
【属性 】 检 查 器 中 的 【指针 热点 工具 】 按 钮 风 ]. 使 用 鼠标 拖 动 热点 区 域 即 可 。 或 者 在 选中 热点 区 域 后 ， 
使 用 键盘 上 的 方向 键 回 、 国 、 国 、 司 .同样 可 以 改变 其 位 置 。 

Dreamweaver 提供 了 一 些 简单 的 命令 ， 可 以 对 齐 图 像 中 两 个 或 更 多 的 热点 区 域 。 在 文档 中 选择 图 像 . 
单 击 【 属 性 】 检 查 器 中 的 【指针 热点 工具 】 按 钮 出， 按 住 Shift 键 后 连续 选择 图 像 中 的 多 个 热点 区 域 。 然 
后 右 击 图 像 ， 在 弹出 的 快捷 菜单 中 可 执行 4 种 对 齐 命令 。 这 4 种 对 齐 命令 的 作用 如 表 8-2 所 示 。 
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表 8-2 4 种 对 齐 命令 的 作用 














将 两 个 或 更 多 的 热 区 以 最 左 侧 的 调节 点 为 准 ， 
将 两 个 或 更 多 的 热 区 以 最 右 侧 的 调节 点 为 准 ， 
将 两 个 或 更 多 的 热 区 以 最 顶部 的 调节 点 为 准 ， 
将 两 个 或 更 多 的 热 区 以 最 底部 的 调节 点 为 准 ， 
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8.4.2 


调节 热点 





区 域 大 小 和 设置 重 又 热点 区 域 层次 





Dreamweaver 提供 了 便捷 的 工具 .人 允许 用 户 调节 热点 区 域 的 大 小 。 在 文档 中 选择 图 像 ， 单 击 【 属 性 】 
检查 器 中 的 【指针 热点 工具 】 按 钮 风 . 将 鼠标 光标 放置 在 热点 区 域 的 调节 点 上 方 ， 当 转换 为 黑色 欠 时 ， 按 
住 鼠标 左 键 并 拖 动 调节 点 ， 即 可 改变 热点 区 域 的 大 小 。 

当 图 像 中 有 两 个 或 两 个 以 上 的 热点 区 域 时 ，Dreamweaver 允许 用 户 在 选中 这 些 热点 区 域 后 ， 右 击 执 





行 【 设 成 宽度 相同 】 或 【 设 成 高 
在 同一 个 图 像 中 . 




















的 层次 。 选 择 文档 中 的 图 像 ， 单 击 【 





度 相同 】 等 命令 ， 将 其 宽度 或 高 度 设置 为 相同 大 小 。 
经 常会 遇 到 重 又 的 热点 区 域 ,，Dreamweaver 人 允许 用 户 为 重叠 的 热点 区 域 设置 简单 
属性 】 检 查 器 中 的 【指针 热点 工具 】 按 钮 出 ， 然 后 右 击 热点 区 域 。 
































本 章 概要 性 地 介绍 了 在 网 页 代码 软件 Dreamweaver 中 如 何 添加 网 页 中 的 链接 ， 为 本 书后 续 的 学 习 打 
下 坚实 的 基础 。 本 章 主要 讲述 4 个 方面 的 内 容 ， 即 超级 链接 类 型 、 插 入 链接 、 绘 制 热点 区 域 、 编 辑 热 点 

















区 域 ， 其 








行 实践 。 
8.9:1 


壁纸 网 站 中 包 


实战 ， 制 作 木 森 壁 





看 大 图 像 。 本 例 运 用 插入 文本 链接 、 


插入 图 片 链 接 ， 如 图 


木 深 迪 性 纸 














veese 


近 居 划分 于 类 


8-8 所 示 。 





包括 制作 吸引 人 的 网 站 的 一 些 方法 和 相关 技术 ， 接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进 


这 纸 酷 网 站 


含有 大 量 的 图 片 和 文字 信息 。 用 户 通过 单 击 其 中 的 小 图 像 可 以 链接 到 新 的 网 页 ， 以 查 





图 








像 链接 制作 木 森 壁纸 酷 网 站 ， 主 要 练习 插入 文本 链接 、 插 入 图 像 、 





设 为 首页 | 收藏 本 站 | 联系 我 们 





图 8-8 制作 木 森 壁纸 酷 网 站 
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STEP|01 新 建文 档 ， 在 标题 栏 输入 “ 木 森 壁纸 酷 "， 如 图 8-9 所 示 。 
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图 8-9 【新 建文 档 〗 对 话 框 








单 击 【属性 】 面 板 中 的 【页 面 属性 】 按 钮 ， 在 弹出 的 【页 面 属性 】 对 话 框 中 设置 其 参数 ， 如 图 8-10 
和 图 8-11 所 示 。 





























《>HMTNL 目标 规则 “新 内 联 样式 > ~ 由 字 栖 人 0】 名 默认 字体 -| 加 ~ 医 亚 酒 面 回 
| Cm ere) Kh J 加 
文档 标题 木 麻 壁 纸 栈 | 商人 [3 | 

















图 8-10 【属性 】 面 板 





















































分 类 外 观 css) 
OTD) 页 面 字体 0); 加 默认 字体 ~ = 
SS 大 小 6): 区 S| 
文本 颜色 0): 国 | 
背景 颜色 0): 国 
背景 图 像 00); 浏览 00)..， 
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左边 距 m: 0 [pew 右边 距 m: 0 mx 
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图 8-11 【页 面 属性 〗 对 话 框 
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然后 单 才 
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eo00 





二 【插入 】 面 板 HTML 选项 中 的 Div 按钮 .在 弹出 的 【插入 Div】 对 话 框 中 创建 人 D 为 header 





的 Div 层 ， 然后 单 击 【新 建 CSS 规则 】 并 设置 其 CSS 样式 . 如 图 8-12 一 图 8-15 所 示 。 
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图 8-14 【#header 的 CSS 规则 定义 〗 对 话 框 图 8-15 页 面 效果 
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STEP|02 将 光标 置 于 ID 为 header 的 Div 层 中 . 单 击 【 插 入 】| 【图 像 】 按 钮 ， 在 弹出 的 【选择 图 像 源 文 





件 】 对 话 框 中 选择 图 


















像 “one 01.png ， 如 图 8-16 一 图 8-18 所 示 。 
EE $v et(0) $$(O 共 





Div(D) 

图 你 人 D) Ctrl+Alt+I 
段落 (P) 

标题 (E) » 
素 格 位 Ctrl+Alt+T 


图 8-16 【插入 】|【 图 你 】 








Bi photoshopcc 
点 PS 网 RiRi 与 站 
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图 8-18 页 面 效 果 


按照 相同 的 方法 . 单 击 Div 按钮 . 创建 ID 为 banner 的 Div 层 并 设置 CSS 样式 。 通 过 CSS 样式 定义 


ID 为 banner 的 Div 
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图 8-22 所 示 。 








层 的 宽度 为 1003px、 高 度 为 188px， 如 图 8-19 一 

















图 8-19 【插入 Div】 对 话 框 





选择 如 类 型 
为 CSS 规 网 选 择 上 下 文选 择 器 类 型 。 
[四 《 仅 应 用 于 一 个 TL 元 素 ) 四 
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规则 定义 : 
选择 定义 规 MA9 位 置 。 
(RE 和 世面 司 




















图 8-20 【新 建 CSS 规则 〗 对 话 框 
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图 8-21 【〖【#banner 的 CSS 规则 定义 〗 对 话 框 


水 让 壁纸 酷 页 | 全 | 了 








图 8-22 页 面 效 果 








然后 . 单 击 【 插 入 】| 【图像 】 按 钮 在 Div 层 中 插入 素材 图 像 “one 02.png ， 如 图 8-23 和 图 8-24 
所 示 。 
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文件 名 (N): one_02 ~ | 国 @Xf (gif"jpg;"jpeg;"p ” 


[ssmaa | | wa || ms | 














图 8-23 【选择 图 像 源 文件 〗 对 话 框 


2 中 壁纸 酷 设 为 首页 | 收藏 本 站 | 联系 我们 


26ie 这 面 城市 资源 和 "yy 和 需 \ 和 看 





图 8-24 页 面 效 果 





STEP|03 单 击 Div 按钮 . 创建 ID 为 content 的 Div 层 , 并 设置 CSS 样式 属性 , 如 图 8-25 一 图 8-29 所 示 。 


























选择 器 类 型 : 
为 CSs 知 mn 至 上 下 广 运 择 强 类 型 
(ei) 
选择 于 名 称 - 
过 择 或 给 入 选择 器 名 称 
Beentont - 
省 me 
至 入 :| 在 插入 点 "] ~ 
Class: - » 
ID: eontent = 趟 大 上 休 更 页 人 
ET WE 规则 定义- 
a 过 择 定 X 规 RM 位 向 。 
CE i 
图 8-25 【插入 Div】 对 话 框 图 8-26 【新 建 CSS 规则 〗 对 话 框 
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AS 只 衬 
第 8 章 
Wiath@f) : 1003 区 一 > Flout 0) 加 + 一 选民 器 
Heieht 00 : S70 = ot) = FE 
a ee #header 
捐 团 全 部 相同 G) 团 全 部 相同 中) 
世 Topt) -| i 司 医 #banner 
Right ®) -jlm 7) iehtG) = |[px 
Botton (B) "|p | Bottoml) 引 属 #leftmain 
Left 0) -|[sx > Left E) -| 车 ttle 
中 属性 
中 口 加 88 示 集 
出 布局 
width : 1003 px 
用 了 T 确定 |] | 取消 应 用 愉 ) height : 570 px 
图 8-27 【#content 的 CSS 规则 定义 】 对 话 杠 图 8-28 CSS 属性 
水 Be 
小 At 人 壁 纸 酷 | | WEAN ; | 








图 8-29 页 面 效 果 





然后 ,分 别 谋 套 ID 为 leftmain、rightmain 的 Div 层 ， 并 设置 其 CSS 样式 属性 ， 如 图 8-30 和 图 8-31 
所 示 。 


和 enaln >|。 ET 
+ 一 “属性 
十 





























了 人 中 回 口 加 显示 集 
中 加 EF 二 1 
width 800 px 
I 布 A height 550 px 
width float ; 国 泽 加 
height 四 攻 
Et 5: 圭 rr @ 面 
图 8-30 leftmain 层 CSS 属性 图 8-31 rightmain 层 CSS 属性 


在 为 leftmain 的 Div 层 中 . 嵌 套 类 名 称 为 title 的 Div 层 . 并 设置 其 CSS 样式 属性 。 创 建 类 的 方法 
与 创建 卫 的 方法 是 一 样 的 ， 如 图 8-32 一 图 8-34 所 示 。 
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图 8-32 【插入 Div】 对 话 框 























和 择 加 类 到- 
为 css 规 Rg 反 上 下文 法 类 到。 

(同属 于 任何 rm 元 
者 器 名 称 : 
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aa S 
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不 太 具 伟 更 具 伟 

规 网 定义 : 
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图 8-33 【新 建 CSS 规则 】 对 话 框 


























+ 展 性 

中 国 癌 口 回 号 示 集 
出 市 局 

height 3 20 px 

paddng ; 部 看 散记 

















国 文本 

color | FFF 
font-weight bold 
font-size 14px 
text-align 国 

图 首 时 

backorount [| se9zfse 


图 8-34 CSS 属性 


然后 ,创建 ID 为 febianlv 的 Div 层 并 设置 其 CSS 样式 属性 。 将 光标 置 于 类 名 称 为 title 的 Div 层 中 ， 


重新 输入 文本 ， 如 图 8-35 所 示 。 











STEP|I04 在 ZD 为 fsbianlv 的 Div 层 中 输入 文本 ， 并 单 击 【 属 性 】 检 查 器 中 的 【项 目 列表 】 按 钮 ， 在 项 
目 列表 中 输入 <li> 标 签 ， 设 置 文本 【和 链接】 为 “javascriptvoidCnul) 。 然 后 利用 相同 的 方法 创建 其 他 几 个 








标签 ， 如 图 8-36 和 图 8-37 所 示 。 














#content #|eftmain #febianlv 
+ ” 属性 


| 本 iE 


国 文本 
line-height : 20 px 
text-decoration T 工 于 








图 8-35 CSS 属性 





按 屏 幕 分 辨 下 分 类 


此 处 显示 id "febianlv 的 内 容 
按 屏幕 分 并 率 分 类 


图 8-36 页 面 效果 


第 8 章 网 页 中 的 链接 
































图 8-37 【属性 〗】 面 板 


单 击 Div 按钮 ,在 弹出 的 【插入 Div】 对 话 框 中 . 选择 【类 】 名 称 为 title. 单 击 【确定 】 按 钮 。 然 后 . 
创建 人 D 为 neirong 的 Div 层 . 并 设置 其 CSS 样式 . 如 图 8-38 和 图 8-39 所 示 。 





#content #leftmain #neirong 
ke 


文本 
line-height : 20 px 























图 8-38 【插入 Div】 对 话 框 图 8-39 CSS 属性 


STEP|05 在 ID 为 rightmain 的 Div 层 中 , 财 套 类 名 称 为 rows 的 Div 层 并 设置 其 CSS 样式 属性 ,如 图 8-40 
所 示 。 

然后 ， 在 Tows 的 Div 层 中 ， 分 别 嵌 套 类 名 称 为 pic、declare 的 Div 层 ， 并 设置 其 CSS 样式 属性 ， 如 
图 8-41 和 图 8-42 所 示 。 


















































TI IE 
全 同人 + 一 属性 二 
| [EE 三 六 [CE | 
四 别 回 可 于 时 国 日 
而 市 局 出 市 月 
width : 385 px 加 布局 width 
ne 并 width : 162px Mae 
margin : 如 硬 遂 训 height : 120 px margin 
10 px 
2 ra 5 [e 肥 
10 px opr 
float : 国 己 加 float * 国 至 量 
图 衣 景 国 文本 
sr float : 圈 音 旺 line-height = : 25 px 
图 8-40 CSS 属性 图 8-41 名 为 pic 的 Div 层 图 8-42 名 为 declare 的 Div 层 


将 光标 置 于 类 名 称 为 pic 的 Div 层 中 . 插入 图 像 “smalll .jpg : 在 【类 】 名 称 为 declare 的 Div 层 中 输 
入 文本 。 然 后 选择 图 像 ， 在 【属性 】 检 查 嚣 中 设置 【链接 】 为 “1.jpg”、【 边 框 】 为 0. 设置 文本 【链接 】 
为 “javascript:void(nul);” ， 如 图 8-43 一 图 8-45 所 示 。 
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典 








‘1280x1024 | 1600x1200 | 1440x900 


:1680x1050 1 1024x768 | 1280x800 





‘Amount: 208K Type: 车 


图 8-43 页 面 效 果 
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图 像 链 接 


图 8-44 图 像 【属性 】 面 板 








EE 
-BI 


《> wmuL| ”格式 9) [无 了 类 declare 


无 ~ 科 摘 0 jevascript:void Gll); 


RS 





STEP|06 按照 相同 的 方法 ， 创 建 类 名 称 为 rows 的 Div 层 . 并 在 rows 类 中 旗 套 类 名 称 为 pic、declare 的 
分 别 插入 图 像 及 输入 文本 ， 并 进行 图 








Div 层 . 在 其 








图 8-45 设置 文本 【链接 】 





图 8-46 页面 效 果 


像 链 接 和 文本 链接 ， 如 图 8-46 所 示 。 


Jride-_ ArchigraphsA 意 3Dzji 持 
天 设计 壁纸 Size- 1230x1024 


将 光标 置 于 文档 底部 . 单 击 Div 按钮 
入 文本 ， 如 图 8-47 和 图 8-48 所 示 。 
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图 8-47 CSS 属性 
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. 创建 们 为 footer 的 Div 层 . 并 设置 其 CSS 样式 属性 . 然后 输 


设 为 首页 | 加 入 收藏 | 联系 我 们 | 地 图 索引 | 常见 问题 | 图 酷 论 坛 | 资料 来 源 于 网 络 
1998-2010 © Copyright Respective Musen com 


图 8-48 ”页面 效果 


8.5.2 ”实战 : 制作 百科 网 页 


现实 社会 千姿百态 ， 好 比 一 本 百科 全 书 。 互 联网 走 进 日 常生 活 势不可挡 ， 越 来 越 多 现实 社会 中 的 信 
息 都 可 以 在 相关 的 网 站 中 看 到 缩影 ， 越 来 越 多 的 人 正在 使 用 网 站 百科 功能 来 解答 自己 生活 中 遇 到 的 各 种 
问题 。 本 例 将 通过 文本 链接 和 图 像 链 接 等 技术 ， 制 作 一 个 生活 百科 网 页 ， 主 要 练习 文本 链接 的 使 用 、 图 


像 链 接 的 使 用 ， 如 图 8-49 所 示 。 





级 客机 。 








空中 客车 





空中 客车 4320 系 列 飞机 是 欧洲 空中 客车 工业 公司 研制 生产 的 单 通道 双 发 中 短程 150 座 


客机 市 场 的 局 面 后 ， 诀 定 研制 与 波音 737: 


满足 航 宝 公 司 低 成 本 运营 中 短程 航线 的 需 - 希望 飞机 能 优化 客船 布局 、 行 
幸 和 货运 装 邱 更 方便 、 操 作 极 具 灵 活性 。 … 全 文 

按 开放 分 类 浏览 

文化 领域 自然 领域 文学 文物 古迹 互联 网 数码 硬件 世界 历史 中 国 经 现代 历史 

艺术 生活 地 理 社会 

建筑 工艺 品 议 食 休闲 交通 矿物 水 域 地 较 机 构 民族 

球 类 运动 体育 组 织 动物 植物 天 文 数理 化 医药 学 生理 学 企业 /品牌 全 融 





空中 客车 公司 在 其 研制 的 A30 






) 宽 体 客机 获得 市 场 肯定 ， 打 破 美国 垄断 
系列 进行 竞争 的 机 型 ， 旨 在 


















图 8-49 制作 百科 网 页 
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网 页 设计 与 网 站 建设 自学 经 典 








STEP|01 新 建 空白 文档 ， 在 页 面 中 插入 一 个 【宽度 】 为 “800 像素 ”的 2 行 x2 列 的 表格 。 然 后 ， 添 
加 功 为 “tb01”, 设置 其 【填充 】 为 0.【 间 距 】〗 为 0、【 边 框 】 为 0.、【 对 齐 】 为 【居中 对 齐 】， 如 图 8-50 
和 图 8-51 所 示 。 
































表格 大 小 
行 数 : 2 列 4 
雪 格 宽度 : 800 [ 贸 素 zz] 
这 框 炬 细 : 0 。。 像素 
单元 格 边 下 0 。 图 
单元 格 间 下 0 。 国 
标题 


预 助 功能 
标题 : 
镇 要 ^ 








图 8-50 Table 对 话 框 








FF 天 格 行 WE | 00 [ez) CORP 和 Lion [居中 对 齐 =] Clsss 无 @ 
ow es ellSpace 0 | Bordero 3 
SHH om 
5 a 





图 8-51 【属性 】 面 板 


然后 切换 到 【代码 视图 】， 在 <style type="css/javasript"></style> 标 签 对 之 间 添 加 代码 ， 并 设置 第 1 行 
单元 格 中 输入 相应 的 文本 并 设置 该 单元 格 的 【类 】 为 tdtitle， 如 图 8-52 所 示 。 

-tdtitle 

{ 
background-image:url(Images/9 
background-repeat:repeat-x; 
padding- left:10px; 
font-size:15px; 
font-family: "微软 雅 黑 " 
font-weight:bold; 
height:29px; 





图 8-52 CSS 样式 代码 
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在 了 D 为 “tb01” 的 表格 第 2 行 第 1 列 插 入 图 像 “feijijpg ， 第 2 列 输 入 相应 的 文本 ， 并 为 图 像 和 特 
定 的 文本 设置 超 链接 。 然 后 ， 切 换 到 【代码 视图 】， 在 <style type="text/css"></style> 标 签 对 之 间 添 加 用 于 
控制 第 2 行 第 1 列 的 CSS 类 tdleft、 用 于 控制 第 2 行 第 2 列 的 CSS 类 tdright、 用 于 控制 超级 链接 样式 的 a 
和 a: hover， 如 图 8-53 所 示 。 



























-tdleft 
Tt 
padding:182x; 
} 
-tdright 
Lt 
padding: 
Color:=555; 
font-family: "宋体 " 入 
font-size:152x;lLine-height:1.5em; 
} 
-bluetext 
Tt 
color:= - 
font-weight:ccld; 
font-size:152*; 
} 
a 
{ 
color: 
text-decoration:L"derl:"e; 
} 
a:hover 
{ 
text-decoration:"c"s; 
} 


图 8-53 CSS 样式 代码 


STEP|02 在 页 面 中 插入 一 个 【宽度 】 为 “800 像素 ”的 2 行 x1 列 的 表格 ， 然 后, 添加 ID 为 “tb02 
设置 其 【填充 】 为 0、【 间 距 】 为 0、[ 边 框 】 为 0， 如 图 8-54 所 示 。 




















PE 行 QE | 更) 800 [多 来 =] ca?s4 0 Aim [居中 对 齐 | Da 无 到 回 
EC alspuce5 aoraaco 4 
jom 








图 8-54 【属性 】 面 板 


在 第 1 行 单元 格 中 输入 相应 的 文本 . 在 第 2 行 单元 格 中 插入 一 个 【宽度 】 为 “100% ”的 6 行 x4 列 表 
格 , 并 设置 其 【填充 】 为 5、【 间 距 】 为 0。 在 表格 各 单元 格 中 输入 相应 的 文字 ,并 选择 表格 第 1 行 、 第 3 
行 和 第 5 行 单元 格 中 的 文字 ,为 其 设置 【链接 】 为 “# .如 图 8-55 和 图 8-56 所 示 。 











网 页 设计 与 网 站 建设 自学 经 典 
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图 8-56 ”页面 效果 


164 





在 网 页 中 适当 地 添加 一 些 多 媒体 元 素 ， 可 以 给 浏览 者 的 听觉 或 视觉 带 来 强烈 的 震撼 ， 从 而 能 够 留 下 
深刻 的 印象 。 在 网 页 中 可 以 插入 的 多 媒体 元 素 有 很 多 种 ， 如 网 页 中 的 背景 音乐 或 MTV 等 。 另 外 , 还 可 以 
向 网 页 中 添加 使 用 Shockwave 的 影片 以 及 各 种 插件 ， 通 过 使 用 这 些 元 素来 增强 页 面 的 可 视 性 。 

本 章节 主要 讲述 插入 Flash 动画 、 插 入 FLV 视频 、 多 媒体 网 页 制作 和 综合 实战 。 通 过 对 本 章 的 学 习 
我 们 可 以 知道 ， 如 何 插入 多 媒体 元 素 以 及 各 种 多 媒体 的 应 用 .创建 自己 的 多 媒体 网 页 。 
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网 页 设计 与 网 站 建设 自学 经 典 


醒 1 图 插入 Flash 动画 


网 页 元 素 除 了 文本 和 图 像 外 ， 还 包括 Flash 动画 ， 其 扩展 名 为 swf， 具 有 体积 小 、 形 式 多 ,并 且 可 以 
添加 声音 等 优点 。 本 节 主要 讲述 两 个 方面 的 内 容 . 插入 普通 Flash 动画 和 透明 Flash 动画 。 用 户 通过 对 本 
节 的 学 习 ， 为 后 期 的 网 站 建设 英 定 基础 。 
9.1 


.1.1 插入 普通 Flash 动画 











普通 Flash 动画 的 插入 方法 非常 简单 将 光标 置 于 插入 Flash 动画 的 位 置 . 单 击 【 插 入 】 面板 中 的 Flash 
SWF 按钮 ， 在 弹出 的 对 话 框 中 选择 Flash 文件 ， 如 图 9-1 所 示 。 














(Os « % » tramn ， 素 村 ， -[4)| ex p| 
组 识 ” 。 新 建文 件 突 * 国人 @ 
中 本 乐 “你 修改 日 其 和 

上 imaoe 2015/10130 15:30 文件 实 
及 
于 计算 机 
包 5 
加 软件 (DJ 
办 DE) | 
Ne 
6) 
” es oe 一 了 
本 
XE: > [SWF# Csm) 习 


[emaa [| we ] ww | 


图 9-1 插入 普通 Flash 动画 








单 击 【 确 定 】 按 钮 后 ， 即 可 在 弹出 的 【对 象 标签 辅助 功能 属性 】 对 话 框 中 设置 Flash 动画 的 【标题 】 
等 属性 ， 单 击 【确定 】 按 钮 为 文档 插入 Flash。 此 时 , 文档 中 将 显示 一 个 灰色 的 方 框 ， 其 中 有 Flash 标志 。 
在 文档 中 选择 该 Flash 文件 ,【 属 性 】 面 板 中 将 显示 该 文件 的 各 个 参数 . 如 大 小 、 路 径 、 品 质 等 ,如 图 9-2 
所 示 。 








标题 : | 
访问 键 - Tab 键 索引 - 


如 果 在 揪 入 对 象 时 不 起 输入 此 信息 ， 千 更改 - 镍 
助 功能 "首选 参数 。 








图 9-2 【对 象 标签 辅助 功能 属性 对 话 框 





:3: 第 9 章 设计 多 媒体 网 页 





SWF【 属 性 】 面 板 中 各 个 选项 及 其 作用 的 详细 介绍 如 表 9-1 所 示 。 
表 9-1 SWF【 属 性 】 面 板 中 的 各 选项 及 作用 




















名 称 功能 描述 
ID 为 SWF 文件 指定 唯一 个 

宽 和 高 以 像素 为 单位 指定 影片 的 高 度 和 宽度 

文件 指定 SWF 或 Shockwave 文件 的 路 径 

背景 指定 影片 区 域 的 背景 颜色 

编辑 启动 Flash 以 及 更 新 FLA 文件 


循环 使 影片 连续 播放 

自动 播放 | 在 加 载 页面 时 自动 播放 影片 

重 直 边 距 | 指定 影片 上 、 下 空白 的 像素 数 

水 平 边 距 | 指定 影片 左 、 右 空白 的 像素 数 

品质 在 影片 播放 期 间 控制 抗 失 真 ， 分 为 低 品 质 、 自 动 低 品质 、 自 动 高 品质 和 高 品质 

比例 确定 影片 如 何 适合 在 宽度 和 高 度 文本 框 中 设置 的 尺寸 。 默 认为 显示 整个 影片 

对 齐 确定 影片 在 页 面 中 的 对 齐 方式 

Wmode “| 为 SWE 文件 设置 Wmode 参数 以 避免 与 DHTML 元 素 ( 例 如 Spry 构件 ) 相 冲突 。 默 认 值 为 不 透明 
播放 在 【文档 〗 窗 口中 播放 影片 

参数 打开 一 个 对 话 框 ， 可 在 其 中 输入 传递 给 影片 的 附加 参数 


9.1.2 ”透明 Flash 动画 
当 插 入 的 Flash 动画 没有 背景 图 像 时 ,就 可 以 通过 【属性 】 面 板 中 的 Wmode 选项 将 其 设置 为 透明 Flash 








动 


加 


在 文档 中 插入 一 个 没有 背景 的 Flash 动画 .方法 与 插入 普通 Flash 动画 相同 。 然 后 ， 单 击 【属性 】 面 
板 中 的 【播放 】 按 钮 预览 效果 ， 可 以 发 现 该 Flash 动画 并 未 显示 为 透明 动画 。 

停止 动画 预览 后 ， 在 【属性 】 面 板 中 选择 Wmode 选项 为 【透明 】。 然 后 保存 文档 后 预览 网 页 ， 可 以 
发 现 该 Flash 动画 中 的 黑色 背景 被 隐藏 ， 网 页 的 背景 图 像 完全 显示 。 


1 也 大 插入 FLV 视频 


FLV 是 一 种 新 的 视频 格式 .全 称 为 Flash Video， 用户 可 以 向 网 页 中 轻松 添加 FLV 视频 ,而 无 须 使 用 
Flash 创作 工具 。 由 于 它 形 成 的 文件 极 小 、 加 载 速度 极 快 ， 使 得 网 络 观看 视频 文件 成 为 可 能 ， 它 的 出 现 有 
效 地 解决 了 视频 文件 导入 Flash 后 .使 导出 的 SWF 文件 体积 庞大 、 不 能 在 网 络 上 很 好 地 使 用 等 问题 。 本 
节 主 要 讲述 两 个 方面 的 内 容 ， 累 进 式 下 载 视频 和 流 视频 。 用 户 通过 对 本 节 的 学 习 ， 为 后 期 的 网 站 建设 黄 
定 基 础 。 


9.2.1 ”累进 式 下 载 视 频 


累进 式 下 载 视频 即 人 允许 用 户 下 载 到 本 地 计算 机 中 播放 的 视频 。 相 比 传统 的 视频 ， Flash 允许 用 户 在 下 
载 的 过 程 中 播放 视频 已 下 载 的 部 分 。 
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在 Dreamweaver 中 创建 空白 网 页 ， 然 后 即 可 单 击 【 插 入 】 面 板 中 的 Flash Video 按钮 ， 在 弹出 的 【 插 
入 FLV】 对 话 框 中 选择 FLV 视频 文件 ， 并 设置 播放 器 的 外 观 、 视 频 显示 的 尺寸 等 参数 ， 如 图 9-3 所 示 。 








视频 类 型 :[ 困 进 式 下 载 视频 = 多 定 


























URL: ER 必 助 
( 铀 入 FLV 文件 的 相对 或 地 对 路 径 ) 











外 观 Clear Skin 1 (最 小 宽度 : 140) ~ 








ple 


回 根 制 克 比 
高 度 - 包括 外 观 : 


回 自动 播放 
回 自动 重新 播放 





”要 看 疫 须 ,请 在 洲 帮 二 中 预 攻 页 面 








图 9-3 【插入 FLV】〗 对 话 框 
【累进 式 下 载 视频 】 类 型 的 各 个 选项 名 称 及 作用 详细 介绍 如 表 9-2 所 示 。 
表 9-2 【累进 式 下 载 视频 】 类 型 的 各 个 选项 名 称 及 作用 


选项 名 称 作用 
URL 指定 FLV 文件 的 相对 路 径 或 绝对 路 径 
外 观 指定 视频 组 件 的 外 观 
宽度 以 像素 为 单位 指定 ELV 文件 的 宽度 
高 度 以 像素 为 单位 指定 FLV 文件 的 高 度 
限制 高 宽 比 保持 视频 组 件 的 宽度 和 高 度 之 间 的 比例 不 变 
自动 播放 指定 在 Web 页 面 打 开 时 是 否 播放 视频 
自动 重新 播放 指定 播放 控件 在 视频 播放 完 之 后 是 否 返 回 起 始 位 置 








设置 完成 后 , 文档 中 将 会 出 现 一 个 带 有 Flash Video 图 标的 灰色 方 框 ， 此 时 还 可 以 在 【属性 】 面 板 中 
重新 设置 FLV 视频 的 尺寸 、 文 件 URL 地 址 、 外 观 等 参数 ， 如 图 9-4 所 示 。 





























ey 帘 0) 50 文件 四 素材 /s。 © 回 育 及 凑 色 6) J 无 可 
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回 视 FD 。。 三 直 边 下 品质 四 ) 高 品质 ~ 入 几 [EVA 全 ~ 

同 自 动 播放 0D 水 平 边 距 C) 比例 全) 加 认 全 部 8 示 ) 。 - 。 和 de 加 [不 授 朋 ~][ 一 儿 数 一 到 

















图 9-4 在 【属性 〗 面 板 中 重新 设置 参数 
保存 该 文档 并 预览 效果 ， 可 以 发 现 一 个 生动 的 多 媒体 视频 显示 在 网 页 中 。 当 光标 经 过 该 视频 时 ， 将 
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显示 播放 控制 条 :反之 离开 该 视频 . 则 隐藏 播放 控制 条 . 如 图 9-5 所 示 。 
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完成 四 Internet | 保护 模式 : 启用 柱 ” 或 100% > 














图 9-5 显示 播放 控制 条 
9.2.2” 流 视频 


流 视频 是 比 累进 式 下 载 视频 安全 性 更 好 ， 更 适合 版 权 管理 的 一 种 视频 发 布 方式 。 相 比 累进 式 下 载 的 
视频 ， 流 视频 的 用 户 无 法 通过 完成 下 载 ， 将 视频 保存 到 本 地 计算 机 中 。 然 而 使 用 流 视频 需要 建立 相应 的 
流 视 频 服 务 器 ， 通 过 特殊 的 协议 提供 视频 来 源 。 

使 用 Dreamweaver CC， 用 户 也 可 以 方便 地 插入 流 视频 。 单 击 【 插 入 】 面 板 中 的 【媒体 : FLV】 按 钮 . 
在 弹出 的 【插入 FLV】 对 话 框 中 选择 【视频 类 型 】 为 【 流 视频 ]】， 然 后 在 该 对 话 框 的 下 面 将 显示 相应 的 选 
项 ， 如 图 9-6 所 示 。 














视频 关 型 [ 流 视 频 











服务 器 URL rtep:// 
(请 输入 服务 器 名 疗 、 应 用 屋 序 名 疗 和 实例 名 千 
例如 ,rtmpJimyserverimyappimyinstance ) 
起 名 称 
和 外观 :|Clear Skin 1 (最 小 误 度 : 140) 














[UE 


真 度 团 限制 高 丰 比 
BE 包括 外 更 
问 失 时 视 须 输入 
回 自动 播放 
固 向 功 重 新 播放 
组 省 时 间 :0 参 





@ 要 观 罩 视频 ,请 在 浏览 器 中 预 苑 页面。 
您 还 考 要 上 传 所 震 的 文件 。 显示 





图 9-6 【 流 视频 〗】 类 型 
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流 视频 】 类 型 的 各 个 选项 名 称 及 作用 详细 介绍 如 表 9-3 所 示 。 
表 9-3 【 流 视频 】 类 型 的 各 个 选项 名 称 及 作用 














选项 名 称 | 

服务 器 URI 指定 服务 器 名 称 、 应 用 程序 名 称 和 实例 名 称 

流 名 称 指定 想 要 播放 的 FLV 文件 的 名 称 。 扩 展 名 flv 是 可 选 的 

外 观 指定 视频 组 件 的 外 观 ， 所 选 外 观 的 预览 会 显示 在 【外 观 】〗 弹 出 菜单 的 下 方 
宽度 以 像素 为 单位 指定 FLV 文件 的 宽度 










高 度 
限制 高 宽 比 
实时 视频 输入 
自动 播放 
自动 重新 播放 
缓冲 时 间 


以 像素 为 单位 指定 FLV 文件 的 高 度 

保持 视频 组 件 的 宽度 和 高 度 之 间 的 比例 不 变 ， 默 认 情 况 下 会 选择 此 选项 
指定 视频 内 容 是 否 是 实时 的 

指定 在 Web 页 面 打开 时 是 否 播 放 视 频 

指定 播放 控件 在 视频 播放 完 之 后 是 否 返 回 起 始 位 置 

指定 在 视频 开始 播放 之 前 进行 缓冲 处 理 所 需 的 时 间 (以 秒 为 单位 ) 








设置 完成 后 ， 文 档 中 同样 会 出 现 一 个 带 有 Flash Video 图 标的 灰色 方 框 ， 此 时 还 可 以 在 【属性 】 面 板 
中 重新 设置 FLV 视频 的 尺寸 、 服 务 器 URI、 外 观 等 参数 。 











及 恒 多 媒体 网 页 制作 


多 媒体 网 页 是 指 在 网 页 中 添加 了 声音 、 视 频 和 Flash 电影 等 多 媒体 内 容 的 页 面 。 声 音 和 视频 这 些 多 媒 
体内 容 ,使 得 原来 的 静态 网 页 变 得 活 色 生 香 ， 目 前 主流 的 动画 文件 格式 是 Flash 动画 文件 。 本 节 介绍 如 何 
在 网 页 中 插入 FlashPaper、Shockwave 视频 、Java Applet 程序 、ActiveX 控件 和 插件 。 用 户 通 过 对 本 节 的 
学 习 ， 为 后 期 的 网 站 建设 奠定 基础 。 


9.3.1 插入 FlashPaper 


如 果 想 要 将 Word 文档 、PowerPoint 文档 或 者 Excel 文档 发 布 到 网 页 中 ， 并 且 希 望 禁止 其 他 用 户 编辑 
修改 ， 以 保护 自己 的 知识 产权 ， 可 以 将 其 制作 成 FlashPaper。 

FlashPaper 与 普通 的 Flash 动画 有 所 不 同 ， 普 通 的 Flash 动画 只 能 够 观看 ， 或 者 添加 超级 链接 ， 而 
FlashPaper 不 仅 能 够 观看 . 还 可 以 在 其 中 翻 页 、 缩 放 、 搜 索 ， 以 及 打印 该 文档 。 

在 Dreamweaver CC 中 可 以 直接 插入 FlashPaper。 单 击 【插入 】 面 板 【 常 用 】 选 项 卡 中 的 【媒体 : 
FlashPaper】 按 钮 ， 在 弹出 的 【插入 FlashPaper】 对 话 框 中 选择 文件 源 ， 并 设置 动画 显示 的 尺寸 。 

保存 文档 后 预览 效果 . 在 网 页 的 Flash 中 可 以 使 用 右边 的 滚动 条 滚动 页 面 。 当 放大 FlashPaper 中 的 内 
容 时 ， 其 底部 会 自动 出 现 水 平 滚动 条 ， 让 用 户 能 够 左右 拖 动 查看 内 容 ， 如 图 9-7 所 示 。 


9.3.2 插入 Shockwave 视频 


Shockwave 是 Web 上 用 于 交互 式 多 媒体 的 一 种 标准 ， 并且 是 一 种 压缩 格式 ， 可 使 在 Director 中 创建 
的 媒体 文件 能 够 被 大 多 数 常用 浏览 器 快速 下 载 和 播放 。 
将 光标 置 于 要 插入 Shockwave 影片 的 位 置 . 单 击 【媒体 : Shockwave】 按钮 ， 在 弹出 的 【选择 文件 】 
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对 话 框 中 选择 要 播放 的 视频 文件 ， 即 可 在 文档 中 插入 一 个 带 有 Shockwave 图 标的 灰色 方 框 。 








三 眠 党 养 保健 与 养生 
十 高 质量 睡眠 综 千 高 
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3. 一 个 讲 失 取 一 个 谈 竺 蛮 - A 
4 心态 平和 才能 和 用 

5 多 压 六 位 健身 社 病 

6 养生 之 法 贵 在 俊 守 "中 唐 - 











图 9-7 ”插入 ElashPaper 


选择 文档 中 的 Shockwave 文件 ,在 【属性 】 面 板 中 可 以 设置 视频 文件 的 尺寸 垂直 边 距 、 水 平 边 距 
和 对 齐 方式 等 参数 。Shockwave 格式 文件 的 各 种 属性 设置 与 Flash 动画 十 分 类 似 ， 在 此 将 不 再 数 述 。 


9.3.3 插入 Java Applet 程序 


Java Applet 是 一 种 镶嵌 在 HIML 网 页 中 ， 然后 由 支持 Java 的 浏览 器 ， 例如 Netscape Navigator、 正 
以 及 现在 流行 的 FireFox 等 下 载 并 且 启 动 运行 的 Java 程序 。 将 光标 置 于 要 插入 Java Applet 程序 的 位 置 , 
单 击 【媒体 , APPLET] 按钮 ， 在 弹出 的 【选择 文件 】 对 话 框 中 选择 包含 有 Java Applet 程序 的 文件 ,此 时 
文档 中 将 插入 一 个 带 有 APPLET 图 标的 灰色 方 框 。 

在 文档 中 选择 该 方 框 ， 可 以 在 【属性 】 面 板 中 设置 其 显示 的 区 域 尺 寸 、 垂 直 边 距 以 及 水 平 边 距 等 参 
数 。Applet【 属 性 】 面 板 中 各 个 选项 及 作用 详细 介绍 如 表 9-3 所 示 。 


表 9-3 【属性 】 面 板 中 各 个 选项 及 作用 
作 用 

指定 用 来 标识 Applet 以 把 写 脚本 的 名 称 
以 像素 为 单位 指定 Applet 的 宽度 和 高 度 
指定 包含 该 Applet 的 Java 代码 的 文件 
标识 包含 选 定 Applet 的 文件 夹 。 在 用 户 选 择 了 一 个 Applet 后 ， 此 文本 框 将 自动 填充 
对 齐 确定 对 象 在 页 面 上 的 对 齐 方式 
替换 指定 在 用 户 的 浏览 器 不 支持 JavaApplet 或 者 已 禁用 Java 的 情况 下 要 显示 的 替代 内 容 
以 像素 为 单位 指定 Applet 上 、 下 的 空白 量 
以 像素 为 单位 指定 Applet 左 、 右 的 空白 量 
打开 一 个 用 于 输入 要 传递 给 Applet 的 其 他 参数 的 对 话 框 
























生 直 边 距 






水 平 边 中 
参数 


9.3.4 插入 ActiveX 控件 


ActiveX 控件 (以 前 称 作 OLE 控件 ) 是 功能 类 似 于 浏览 器 插件 的 可 复 用 组 件 。Dreamweaver 中 的 
ActiveX 对 象 允 许 用 户 在 网 页 访问 者 的 浏览 器 中 为 ActiveX 控件 设置 属性 和 参数 。 
将 光标 置 于 要 插入 ActiveX 控件 的 位 置 . 单 击 【媒体 : ActiveX】 按 钮 ， 即 可 在 文档 中 插入 一 个 带 有 
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网 页 设计 与 











ActiveX 图 标的 灰色 方 框 。 在 文档 中 选择 该 方 框 . 可 以 在 【属性 】 面板 中 设置 ActiveX 控件 的 尺寸 . ClassID、 
源 文件 等 参数 。 在 选择 源 文 件 之 前 .首先 要 启用 【嵌入 】 复 选 框 。ActiveX【 属 性 】 面 板 中 各 个 选项 及 作 











用 详细 介绍 如 表 9-4 所 示 。 
表 94 ActiveX【 属 性 】 面 板 中 各 个 选项 及 作用 
选项 名 称 作 用 
名 称 指定 用 来 标识 ActiveX 对 象 以 撰写 脚本 的 名 称 


宽 和 高 以 像素 为 单位 指定 对 象 的 宽度 和 高 度 
ClassID 为 浏览 器 标识 ActiveX 控件 ， 输 入 一 个 值 或 从 下 拉 列 表 中 选择 一 个 值 








嵌入 为 该 ActiveX 控件 在 object 标签 内 添加 embed 标签 
对 齐 确定 对 象 在 页 面 上 的 对 齐 方式 
参数 打开 一 个 用 于 输入 要 传递 给 ActiveX 对 象 的 其 他 参数 的 对 话 框 


源 文件 定义 在 启用 了 【 府 入 〗】 复 选 框 时 用 于 Netscape Navigator 插件 的 数据 文件 
重 直 边 距 以 像素 为 单位 指定 ActiveX 控件 上 、 下 的 空白 量 
水 平 边 距 ”| 以 像素 为 单位 指定 ActiveX 控件 左 、 右 的 空白 量 






基 址 指定 包含 该 ActiveX 控件 的 URL 

蔡 换 图 像 指定 在 浏览 器 不 支持 object 标签 的 情况 下 要 显示 的 图 像 ， 只 有 在 取消 选中 【 识 入 〗 复 迁 框 后 
此 选项 才 可 用 

数据 为 要 加 载 的 ActiveX 控件 指定 数据 文件 





设置 完成 后 保存 文档 . 预览 页 面 即 可 查看 . ActiveX 控件 中 添加 的 内 容 。 在 这 号 
的 视频 文件 如 图 9-8 所 示 。 





由 
部 


添加 一 个 WMYV 格式 











图 9-8 添加 WMYV 格式 的 视频 文件 


9.3.5 ”插入 插件 


网 页 浏览 器 作为 一 种 综合 的 多 媒体 播放 平台 ， 可 以 播放 多 种 类 型 的 多 媒体 文档 ， 包 括 音 频 、 视 频 、 
动画 等 。 使 用 Dreamweaver CC， 用 户 可 以 方便 地 将 这 些 媒体 类 型 插入 到 网 页 文档 中 。 

将 光标 置 于 要 插入 影片 的 位 置 ， 单 击 【 插 件 】 按 钮 ,在 弹出 的 对 话 框 中 选择 WMYV 视频 文件 ， 此 时 
文档 中 将 插入 一 个 带 有 插件 图 标的 灰色 方 框 。 选 择 该 方 框 ， 可 以 在 【属性 】 面 板 中 设置 其 尺寸 、 源 文件 
和 插件 的 URL 等 参数 .如 图 9-9 所 示 。 
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插件 ，288K 更 加 32 。 源 文件 信 ) /inacesybeckeoud TTG 固 对 齐 内 [点 认 值 =] class 无 加 ® 
| 高 00 Bz 括 儿 LG@)| = 号 
0 wap | 
水 iD | a 
图 9-9 插入 插件 


插件 【属性 】 面 板 中 各 个 选项 及 作用 详细 介绍 如 表 9-5 所 示 。 
表 9-5 【属性 】 面 板 中 各 个 选项 及 作用 





选项 名 称 作 用 

名 称 指定 用 来 标识 插件 以 扔 写 脚本 的 名 称 

宽 和 高 以 像素 为 单位 指定 在 页 面 上 分 配给 对 象 的 宽度 和 高 度 

源 文件 指定 源 数 据 文件 。 单 击 文件 夹 图 标 以 浏览 菜 一 文件 ， 或 者 输入 文件 名 
插件 URL 指定 pluginspace 属性 的 URL 

对 齐 确定 对 象 在 页 面 上 的 对 齐 方式 

重 直 边 距 以 像素 为 单位 指定 插件 上 、 下 的 空白 量 

水 平 边 距 以 像素 为 单位 指定 插件 左 、 右 的 空白 量 

边框 指定 环绕 插件 四 周 的 边框 的 宽度 

参数 打开 一 个 用 于 输入 要 传递 给 Netscape Navigator 插件 的 其 他 参数 的 对 话 框 


四 


本 章 概要 性 地 介绍 了 插入 Flash 动画 
实 的 基础 。 本 章 主要 讲述 插入 Flash 动画 


、 插 入 FLV 视频 、 多 媒体 网 页 制作 ， 为 本 书后 续 的 学 习 打 下 坚 
、 插 入 FLV 视频 、 多 媒体 网 页 制作 ， 其 中 包括 制作 吸引 人 的 网 


站 的 一 些 方法 和 相关 技术 ， 接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进行 实践 。 


9.4.1 


实战 ， 制作 导航 条 板块 


在 许多 博客 、 个 人 空间 和 网 站 的 页 面 中 都 喜欢 插入 透明 Flash 动画 . 这 样 可 以 使 原本 静止 的 图 片 产生 
Flash 动感 效果 。 本 例 将 制作 一 个 具有 水 滴 效 果 的 导航 条 版 块 ， 主 要 练习 插入 Div、 定 义 CSS 样式 、 插 入 


Flash 动画 、 





设置 Flash 动画 的 透明 度 ， 如 图 9-10 所 示 。 











网 站 首页 。 ”关于 我 们 ”产品 服务 
欢迎 您 进入 我 们 的 网 站 : 


十 字 业 是 一 种 起 源 与 欧洲 的 手艺 ,最 初 是 在 宫廷 中 风行 ， 后 末 传 入 民间 。 广 
泛 流 行 于 欧 渊 和 美国 以 及 亚洲 等 国 宗 和 地 区 。 随 着 对 间 的 推荐 ,形成 了 各 自 的 
吧 格 ,无论 是 业内 ,面料 的 闫 色 还 是 材 页， 各 缠 县 匠 化 

我 们 是 一 二 高 度 专业 化 的 公司 。 考 注 于 十 字 量 手艺 领域 。 目 前 已 形成 经 大 开 
发 设计 能 力 ,精细 化 流程 生产 能 力 ， 专 业 营 铺 各 理 能 力 和 财务 营 控 能力 ,索索 
用 稀 核心 形成 强力 的 忧 势 - 


路 家 相让 设 为 首页 联系 我 们 
e 加 
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加 盟 连 镇 
十 字 绣 分 类 


中 国 风 

人 物 系 列 
动物 系 到 
风景 要 到 
花草 系列 
下 二 到 
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图 9-10 制作 导航 条 板块 








STEP|01 在 Dreamweaver 中 新 建 空白 网 页 文档 ， 设 置 其 【标题 】 为 “蒲公英 十 字 绣 “， 并 将 其 保存 ， 如 





网 页 设计 与 网 站 建设 自学 经 典 ::: 


网 页 设计 与 网 站 建设 自学 经 典 


图 9-11 所 示 。 

































































图 9-11 


【新 建文 档 】 对 话 杠 


STEP|I02 单 击 【 页 面 属性 】 按 钮 。 在 弹出 的 对 话 框 中 设置 页 面 【背景 


属性 ， 如 图 9-12 一 图 9-14 所 示 。 
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目标 规则 “ 杨 内 联 样式 > 
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总 回 句号 Extract 从 Photoshop 复生 中 构建 机 村 
才 助 00_][ 菌 过 部 效 ). FE) ][ 取消 C5) 











图 像 】 【大 小 】 和 【文本 颜色 】 等 
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图 9-12 单 击 【页 面 属 性 〗】 按 钮 





和 出 Css) 
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Emel 











上 边 距 0): 0 pz 





Lom ] 





下 边 距 0): 0 


区 习 





本 取消 
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图 9-13 【页 面 属性 〗 对 话 框 【 外 观 (CSS)】〗 选 项 卡 
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图 9-14 【页 面 属 性 】 对 话 框 【链接 (CSS)】〗 选 项 卡 


STEP|03 单 击 【 插 入 】IHTMLIDiv 按钮 ， 在 弹出 的 【插入 Div】 对 话 框 中 插入 一 个 人 D 为 container 的 层 ， 
在 弹出 的 【#container 的 CSS 规则 定义 】 对 话 框 中 设置 参数 ， 如 图 9-15 一 图 9-19 所 示 。 






















































































过 至 加 类 型 : 
为 css 规 M 选 择 上 下 文选 择 器 藉 型 。 
加 CR- 个 .元 一 =] 
选择 如 名 称 : 
迁 择 或 输入 选择 器 名 称 。 
Cr 3 
和 了 
[不 太 具 体 [ 更 具体 
规则 证 义 : 
选择 定义 规 风 3 位置 。 
《 公 限 该 文档 
图 9-15 【插入 Div】〗】 对 话 框 图 9-16 【新 建 CSS 规则 】〗 对 话 框 
分 类 区 块 
Yord-spacing G) vim = 
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9-17 【#container 的 CSS 规则 定义 〗 对 话 框 1 
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图 9-18 【#container 的 CSS 规则 定义 〗 对 话 框 2 
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图 9-19 【〖【#container 的 CSS 规则 定义 〗 对 话 框 3 















































图 9-20 布局 








STEP|04 使 用 相同 的 方法 ， 在 ID 为 container 的 层 中 插入 两 个 ID 分 别 为 tile 和 banner 的 层 ， 以 及 一 个 
class 为 container 的 层 ， 并 定义 它们 的 样式 ， 如 图 9-20 一 图 9-22 所 示 。 
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paddng 巷 再 进 志 
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SE 
Es 
加 占有 
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ad text-alin 
andett 因 more 
图 9-21 布局 图 9-22 布局 





se. 第 9 章 设计 多 媒体 网 页 
STEP|05 在 ID 为 title 的 层 中 输入 文本 .在 了 D 为 banner 的 层 中 设置 背景 图 像 ， 效果 如 图 9-23 所 示 。 
收藏 本 站 设 为 首页 联系 我 们 











图 9-23 页 面 效 果 


STEP|06 单 击 【 插 入 】| HTML | Flash SWF 按钮 ， 弹 出 【选择 SWF】 对 话 框 ,在 ID 为 banner 的 层 中 
插入 准备 好 的 Flash 文件 ， 如 图 9-24 所 示 。 



























ETT p| 
组 织 "新建 文件 到 =- He 
< 名称 修改 日 其 sm 
于 计算 机 Bimg 2015/10/30 1530 ”文件 闪 
总 5 及 scripts 2015/10/30 15:30 文件 交 
软件 (D3) 吃 水源 2 2008/6/26 8:16 SWF 影 月 
回力 公司 
他 (F) 
点 PhotoshopCC 
上 Psatt se 
测 和 于 哆 
局 网 站 建设 
BE -TEL 
村 于 [文档 3 
文件 各 (N): 水 济 2 ~ |SWF 文件 (,swi) 
EE 














图 9-24 【选择 SWF】〗 对 话 框 





STEP|07 然后 ,在 【属性 】 面 板 中 单 击 【 项 目 列表 】 按 钮 ， 在 class 为 container 的 层 中 插入 列表 并 定义 
该 列表 的 样式 ， 如 图 9-25 和 图 9-26 所 示 。 









































图 9-25 【属性 】 面 板 





页 设计 


网 页 设计 与 网 站 建设 自学 经 典 





STEP|08 选择 该 Flash 文件 ， 在 【属性 】 面 板 中 设置 该 文件 的 Wmode 的 值 为 【透明 】. 


9-28 所 示 。 








与 网 站 建设 自学 经 典 





<div class="container"> 
<ul id="top-nav"> 
<Li><a href="#n> 网 站 首页 </a></Li> 
<Li><a href="#"> 关 于 我 们 <ja><j Ui> 
<Li><a href="#"> 产 品 服务 </a></1i> 
<Li><a href="#"> 服 务 理念 </a></1i> 
<Li><a href="#1"> 肌 线 购买 </a></1i> 
<Li><a href="#"> 加 盟 连 锁 </a></Ui> 
<jul> 
<fdiv> 


图 9-26 CSS 样式 代码 
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如 图 9-27 和 图 
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图 9-27 设置 Wmode 的 值 为 【透明 】 





图 9-28 页 面 效果 


9.4.2 实战: 制作 音乐 播放 网 页 


在 很 多 休闲 和 娱乐 的 网 站 中 都 添加 有 Flash 音乐 ,可 以 实现 播放 、 暂 停 、 快 进 和 后 退 等 功能 ,使 网 站 
感觉 。 本 例 将 制作 一 个 带 有 音乐 播放 的 个 人 空间 ， 主 要 练习 插入 表格 、 设 置 单 


给 访问 者 一 种 轻松 舒适 的 


元 格 的 背景 图 像 、 使 用 【绘制 AP Div]、 创 建 热点 区 域 、 插 入 Flash 插件 ,如 图 9-29 所 示 。 
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图 9-29 制作 音乐 播放 网 页 


第 9 章 设计 多 媒体 网 页 








STEP|01 在 Dreamweaver 中 新 建 空白 网 页 文档 单 击 【 页 面 属性 】 按 钮 ， 在 弹出 的 【页 面 属性 】 对 话 框 
中 设置 页 面 【大 小 】， 【文本 颜色 】、 【左边 距 】 【右边 距 】 和 【标题 】 等 属性 . 如 图 9-30 一 图 9-32 所 示 。 
















目标 规则 “新 内 联 样式 > EEC 
| [Css Dosier] 大 小 @) 无 -| 
文档 标题 无 标 是 文档 | CE ] 























| 续 外 观 _Css) 








页 面 字体 0: 局 默认 字体 -| =][ ~ 
C3) 大 小 5S): 豆 二 

文本 颜色 1); 天 | #77C0F 

背景 颜色 B); 国 | 
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图 9-31 【页 面 属 性 〗 对 话 框 
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图 9-32 【页 面 属性 】 对 话 框 


STEP|02 执行 【插入 】IHTMLITable 命令 .在 弹出 的 Table 对 话 框 中 创建 3 行 x3 列 的 表格 .分 别 合并 第 
1 行 和 第 3 行 单元 格 . 如 图 9-33 一 图 9-35 所 示 。 











网 页 设计 与 网 站 建设 自学 经 典 
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图 9-33” Table 对话 框 
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图 9-34 表格 设置 





图 9-35 页 面 效果 


STEP|03 将 光标 放置 在 第 1 行 单元 格 中 ,执行 【窗口 】|【 标 签 检查 器 】 命 令 


参数 ， 如 图 9-36 所 示 。 


<tr> 





， 设 置 height、background 


<td height="121" colspan="3" background="images/1.jpg">&nbsp;</td> 


</tr> 
图 9-36 CSS 样式 代码 














可 


STEPI04 用 相 


置 在 第 2 行 第 1 列 单元 格 中 . 执行 【插入 】| 【图 像 】 命 令 . 在 第 2 行 第 1 列 中 插入 








图 











像 ， 如 图 





的 方法 .设置 第 2 行 第 2 列 、 第 2 行 第 3 列 和 第 3 行 单 元 格 的 背景 图 像 。 然 后 将 光标 放 


9-37 所 示 。 


STEPI05 选择 第 2 行 第 1 列 单元 格 的 图 像 . 在 【属性 】 面 板 中 单 击 【 圆 形 热点 工具 】 按 钮 ， 分 别 在 “ 主 
页 ”和 “博客 ”等 文本 创建 5 个 热点 区 域 。 然 后 ， 在 【布局 】 选 项 卡 中 单 击 【 绘 制 AP Div】 按钮， 在 第 





2 列 单元 格 中 插入 一 个 外 为 apDivl 的 层 并 定义 其 样式 ， 如 图 9-38 所 示 。 


180 








: 第 9 章 设计 多 媒体 网 页 


#apDiv1{ 
position:absolute; 
visibility:visible; 
left: 250px; 
top: 150px; 
width: 559px; 
height: 394px; 








图 9-37 部 分 页 面 效 果 图 9-38 CSS 样式 代码 


STEPI06 在 I 为 apDivl 的 层 中 输入 文本 ， 然 后 , 在 【CSS 样式 】 面 板 中 定义 标题 和 段落 的 样式 ， 如 图 
9-39 和 图 9-40 所 示 。 














国文 本 font-size : 16px 
text-indent  : 16Px] line-height = : 25 px 
图 9-39 布局 图 9-40 布局 


STEP|07 执行 【插入 】| 【布局 对 象 】| 【绘制 AP Div] 命令 . 在 表格 第 1 行 单元 格 中 绘制 一 个 了 D 为 apDiv2 
的 层 ， 并 定义 该 层 样式 。 然 后 . 执行 【插入 】| 【媒体 】| 【插件 】 命 令 , 在 ID 为 apDiv2 的 层 中 插入 mp3 


音乐 ,并 在 【属性 】 面 板 中 设置 该 插件 的 属性 .如 图 9-41 一 图 9-43 所 示 。 
#apDiv2{ 





2C lpx s 
background-color: =F 





图 9-41 CSS 样式 代码 
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图 9-43 页 面 效 果 








在 网 页 设计 过 程 中 ,为 了 将 网 页 元 素 按照 一 定 的 序列 或 位 置 进行 排列 首先 需 要 对 页 面 进行 布局 . 
而 最 简单 的 布局 方式 就 是 使 用 表格 。 表 格 是 由 行 和 列 组 成 的 ， 而 每 一 行 或 每 一 列 又 包含 一 个 或 多 个 单元 
格 ， 网 页 元 素 可 以 放置 在 任意 一 个 单元 格 中 。 通 过 这 些 数据 表格 的 设置 . 能够 大 大 地 提高 外 观 显示 的 效 
果 ， 而 且 能 够 更 加 直观 地 展现 数据 。 

本 章 主要 介绍 创建 表格 、 编 辑 表格 、Spry 框架 、Spry 菜单 栏 和 综合 实战 。 通 过 本 章 的 学 习 我 们 可 以 
知道 表格 的 创建 和 操作 方法 ， 以 及 如 何 编辑 表格 中 的 单元 格 . 在 Dreamweaver 中 进行 简单 的 页 面 布局 。 
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创建 表格 








表格 通常 用 于 在 HTML 页 面 上 显示 表格 式 数据 ， 以 及 对 文本 和 图 像 进行 布局 ， 通 过 表格 可 以 将 网 页 
元 素 放 置 在 指定 的 位 置 。 本 节 主 要 讲述 两 方面 的 内 容 ， 即 插入 表格 和 谋 套 表格 、 设 置 表格 属性 。 用 户 通 
过 对 本 节 的 学 习 ， 可 以 了 解 到 如 何在 网 页 中 插入 表格 和 谋 套 表格 、 设 置 表格 属性 。 


10.1.1 插入 表格 和 艇 套 表格 


在 插入 表格 之 前 ， 首先 将 鼠标 光标 置 于 要 插入 表格 的 位 置 。 在 新 建 的 空白 网 页 中 ,光标 默认 在 文档 
的 左上 角 。 在 菜单 栏 中 单 击 【 插 入 】|【 表 格 】， 在 弹出 的 【表格 】 对 话 框 中 设置 相应 的 参数 ， 即 可 在 文档 
中 插入 一 个 表格 ,如 图 10-1 所 示 。 



































可 格 大 小 
行 数 : 目 列 : 2 
表格 宽度 : 300 [像素 
边 柜 柜 细 : 0 像素 
单元 格 边 距 : 0 
单元 格 间距 - 图 
标题 
Ea| 下 ”上 
无 左 顶部 两 者 
辅助 功能 
标题 : 
菠 要 : ^ 
EE. 已 崇 _ ] 
图 10-1 插入 表格 


谋 套 表格 是 在 另 一 个 表格 单元 格 中 插入 的 表格 . 设置 其 属性 的 方法 与 任何 其 他 表格 相同 。 将 光标 置 
于 表格 中 的 任意 一 个 单元 格 . 单 击 【 插 入 】 面 板 中 的 【表格 】 按 钮 ， 在 弹出 的 【表格 】 对 话 框 中 设置 相 
应 的 参数 ， 即 可 在 该 表格 中 插入 一 个 谋 套 表格 。 


10.1.2 设置 表格 属性 


对 于 文档 中 已 创建 的 表格 . 可 以 通过 设置 【属性 】 面 板 来 更 改 表 格 的 结构 、 大 小 和 样式 等 。 单 击 
表格 的 任意 一 个 边框 ， 可 以 选择 该 表格 。 此 时 .【 属 性 】 面 板 中 将 显示 该 表格 的 基本 属性 ， 如 图 10-2 
所 示 。 
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图 10-2 设置 表格 属性 


表格 【属性 】 面 板 中 的 各 个 选项 及 作用 介绍 如 下 。 
1. 表格 ID 

表格 ID 用 来 设置 表格 的 标识 名 称 , 也 就 是 表格 的 ID。 选择 表格 . 在 ID 文本 框 中 直接 输入 即 可 设置 。 
2. 行 和 列 

行 和 列 用 来 设置 表格 的 行 数 和 列 数 。 选 择 文档 中 的 表格 ， 即 可 在 【属性 】 面 板 中 重新 设置 该 表格 的 
行 数 和 列 数 。 
3. 宽 

宽 用 来 设置 表格 的 宽度 ， 以 像素 为 单位 或 者 按照 所 占 浏览 器 窗口 宽度 的 百分比 进行 计算 。 在 通常 情 
况 下 ,表格 的 宽度 以 像素 为 单位 ,这 样 可 以 防止 网 页 中 的 元 素 随 着 浏览 器 窗口 的 变化 而 发 生 错位 或 变形 。 
4. 填充 

填充 用 来 设置 表格 中 单元 格 内 容 与 单元 格 边框 之 间 的 距离 ， 以 像素 为 单位 。 
5. 间距 

间距 用 于 设置 表格 中 相 邻 单元 格 之 间 的 距离 ， 以 像素 为 单位 。 
6. 边框 

边框 用 来 设置 表格 四 周边 框 的 宽度 ， 以 像素 为 单位 。 

如 表 10-1 所 示 为 图 标的 名 称 和 功能 。 

















表 10-1 图 标的 名 称 和 功能 















名 称 


区 逢 编辑 表格 


网 页 的 要 求 是 多 样 化 的 ， 如 果 创 建 的 表格 不 符合 网 页 的 设计 要 求 ， 那 么 就 需要 对 该 表格 进行 编辑 。 
本 节 主 要 讲述 选择 表格 元 素 、 调 整 表格 的 大 小 、 添 加 或 删除 表格 行 与 列 、 合 并 及 拆 分 单元 格 、 复 制 及 粘 
贴 单元 格 。 用 户 通过 对 本 节 的 学 习 . 可 以 了 解 到 如 何 编辑 表格 。 





清除 表格 中 已 设置 的 列 宽 
清除 表格 中 已 设置 的 行 高 
将 表格 的 宽度 转换 为 以 像素 为 单位 
将 表格 的 宽度 转换 为 以 表格 占 文档 窗口 的 百分比 为 单位 
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10.2.1 选择 表格 元 素 


在 对 整个 表格 以 及 表格 中 行 、 列 或 单元 格 进行 编辑 时 .首先 需要 选择 指定 的 对 象 。 可 以 一 次 选择 整 
个 表格 、 行 或 列 ， 也 可 以 选择 一 个 或 多 个 单独 的 单元 格 。 
1. 选择 整个 表格 

将 鼠标 移动 到 表格 的 左上 角 、 上 边框 或 者 下 边框 的 任意 位 置 ， 或 者 行 和 列 的 边框 ， 当 鼠标 光标 变 成 
表格 网 格 图 标 知 时 ( 行 和 列 的 边框 除外 ) , 单 击 即 可 选择 整个 表格 。 将 光标 置 于 表格 中 的 任意 一 个 单元 格 
中 , 单 击 状态 栏 中 标签 选择 器 上 的 <table> 标 签 . 也 可 以 选择 整个 表格 .如 图 10-3 所 示 。 






































图 10-3 选择 整个 表格 


2. 选择 行 或 列 

选择 表格 中 的 行 或 列 ， 就 是 选择 行 中 所 有 连续 单元 格 或 者 列 中 所 有 连续 单元 格 。 将 光标 移动 到 行 的 
最 左 端 或 者 列 的 最 上 端 ， 当 鼠标 光标 变 成 选择 箭头 路 或 站 时， 单 击 即 可 选择 单个 行 或 列 ， 如 图 10-4 和 
图 10-5 所 示 。 


























图 10-4 表格 选择 行 





图 10-5 表格 选择 列 


3. 选择 单元 格 

将 鼠标 光标 置 于 表格 中 的 某 个 单元 格 ， 即 可 选择 该 单元 格 。 如 果 想 要 选择 多 个 连续 的 单元 格 .将 光 
标 置 于 单元 格 中 ， 沿 任意 方向 拖 动 即 可 选择 。 将 鼠标 光标 置 于 任意 单元 格 中 . 按 住 Ctrl 键 并 同时 单 击 其 
他 单元 格 ， 即 可 以 选择 多 个 不 连续 的 单元 格 ， 如 图 10-6 所 示 。 















































图 10-6 选择 多 个 不 连续 的 单元 格 
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10.2.2 ”调整 表格 的 大 小 


当选 择 整 个 表格 后 ， 在 表格 的 右边 框 、 下 边框 和 右 下 角 会 出 现 三 个 控制 点 。 通 过 鼠标 拖 动 这 三 个 控 
制 点 ， 可 以 使 表格 横向 、 纵 向 或 者 整体 放大 或 缩小 ， 如 图 10-7 一 图 10-10 所 示 。 














图 10-7 表格 图 10-8 表格 横向 调整 





图 10-9 表格 纵向 调整 图 10-10 表格 整体 放大 或 者 缩小 


除了 可 以 在 【属性 】 面 板 中 调整 行 或 列 的 大 小 外 . 还 可 以 通过 拖 动 方式 来 调整 其 大 小 。 将 鼠标 移动 
到 单元 格 的 边框 上 , 当 光 标 变 成 左右 箭头 4 或 者 上 下 箭头 地 时 , 单 击 并 横向 或 纵向 拖 动 鼠 标 即 可 改变 行 
或 列 的 大 小 。 


10.2.3 ”添加 或 删除 表格 行 与 列 








为 了 使 表格 根据 数据 的 多 少 改变 为 适当 的 结构 ， 通 常 需要 对 表格 添加 或 删除 行 或 者 列 。 
1. 添加 行 与 列 

想 要 在 某 行 的 上 面 或 者 下 面 添加 一 行 ,首先 将 光标 置 于 该 行 的 某 个 单元 格 中 . 单 击 【 插 入 】 面 板 【 布 
局 】 选 项 卡 中 的 【在 上 面 插入 行 】 按 钮 或 【在 下 面 插入 行 】 按 钮 ， 即 可 在 该 行 的 上 面 或 下 面 插入 一 行 。 

想 要 在 某 列 的 左 侧 或 右 侧 添加 一 列 ， 首 先 将 光标 置 于 该 列 的 某 个 单元 格 中 ， 单 击 【 布 局 】 选 项 卡 中 
的 【在 左边 插入 列 】 按 钮 或 【在 右边 插入 列 】 按 钮 ， 即 可 在 该 列 的 左 侧 或 右 侧 插入 一 列 。 
2. 删除 行 与 列 

如 果 想 要 删除 表格 中 的 某 行 ， 而 不 影响 其 他 行 中 的 单元 格 ， 可 以 将 光标 置 于 该 行 的 某 个 单元 格 中 
然后 执行 【修改 】|【 表 格 】|【 删 除 行 】 命 令 即 可 。 


10.2.4 合并 及 拆 分 单元 格 


对 于 不 规则 的 数据 排列 ， 可 以 通过 合并 或 拆 分 表格 中 的 单元 格 来 满足 不 同 的 需求 。 
1. 合并 单元 格 

合并 单元 格 可 以 将 同行 或 同 列 中 的 多 个 连续 单元 格 合并 为 一 个 单元 格 。 选 择 两 个 或 两 个 以 上 连续 的 
单元 格 . 单 击 【属性 】 面 板 中 的 【合并 所 选单 元 格 】 按 钮 ， 即 可 将 所 选 的 多 个 单元 格 合并 为 一 个 单元 格 . 
如 图 10-11 一 图 10-13 所 示 。 

































































图 10-11 表格 合并 前 
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合并 所 远 单元 格 ， 使 用 跨度 


图 10-12 【合并 所 选单 元 格 】 按 钮 





图 10-13 表格 合并 后 


2. 拆 分 单元 格 

拆 分 单元 格 可 以 将 一 个 单元 格 以 行 或 列 的 形式 拆 分 为 多 个 单元 格 。 将 光标 置 于 要 拆 分 的 单元 格 中 
单 击 【属性 】 面 板 中 的 【 拆 分 单元 格 为 行 或 列 】 按 钮 名 ， 在 弹出 的 对 话 框 中 启用 【 行 】 或 【 列 】 选 项 ， 
并 设置 行 数 或 列 数 ， 如 图 10-14 一 图 10-17 所 示 。 











图 10-14 表格 拆 分 前 
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图 10-15 【 拆 分 单元 格 】 按 钮 























图 10-16 【 拆 分 单元 格 】 对 话 框 图 10-17 表格 拆 分 后 


10.2.5 复制 及 粘贴 单元 格 


与 网 页 中 的 元 素 相同 表格 中 的 单元 格 也 可 以 复制 与 粘贴 . 并且 可 以 在 保留 单元 格 设置 的 情况 下 复 
制 及 粘贴 多 个 单元 格 。 
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选择 要 复制 的 一 个 或 多 个 单元 格 . 执行 【编辑 】|【 拷 贝 】 命 令 (或 按 CtltC 组 合 键 )， 即 可 复制 所 
选 的 单元 格 及 其 内 容 ， 如 图 10-18 所 示 。 

选择 要 粘贴 单元 格 的 位 置 ， 执 行 【编辑 】|【 粘 贴 】 命 令 (或 按 CtltV 组 合 键 )， 即 可 将 源 单 元 格 的 
设置 及 内 容 粘 贴 到 所 选 的 位 置 . 如 图 10-19 和 图 10-20 所 示 。 






































1 2 3 4 
5 6 7 8 
图 10-18 复制 单元 格 图 10-19 表格 

















图 10-20 ”粘贴 表格 


[| 用量 Spry 框架 和 Spry 菜单 栏 


Spry 框架 支持 一 组 用 标准 HIML、CSS 和 JavaScript 编写 的 可 重用 构件 。Spry 构件 是 一 个 页 面 元素 ， 








通过 启用 用 户 交互 来 提供 更 丰富 的 用 户 体验 。 本 节 主 要 讲述 Spry 选项 卡 式 面板 、Spry 折 车 式 、Spry 可 折 
全 面板 和 Spry 工具 提示 。 用 户 通过 对 本 节 的 学 习 ， 可 以 了 解 到 什么 是 Spry 框架 和 Spry 菜单 栏 。 


10.3.1 ”Spry 选项 卡 式 面板 


菜单 栏 构件 是 一 组 可 导航 的 菜单 按钮 ， 当 站 点 访问 者 将 光标 悬 停 在 其 中 的 某 个 按钮 上 时 ， 将 显示 相 
应 的 子 菜单 。Dreamweaver 提供 两 种 菜单 栏 构件 ， 即 垂直 构件 和 水 平 构件 。 

1. 插入 菜单 栏 构件 

在 文档 中 ， 单 击 【 插 入 】 面 板 中 的 【Spry 菜单 栏 ]】 按钮， 在 弹出 的 对 话 框 中 启用 【水 平 】 或 【垂直 ]】 
单 选 按钮 ， 即 可 创建 水 平 或 垂直 菜单 构件 。 

2. 添加 菜单 项 

在 【文档 】 窗 口中 选择 一 个 菜单 栏 构 件 ， 在 【属性 】 检 查 器 中 单 击 第 1 列 上 方 的 【添加 菜单 项 】 按 
钮 国 ， 即 可 添加 一 个 新 的 菜单 项 。 然 后 ， 在 右 侧 的 【文本 】 文 本 框 中 可 以 重 命名 该 菜单 项 。 

在 【文档 】 窗 口中 选择 菜单 栏 构 件 ， 在 【属性 】 检 查 器 中 选择 任意 主 菜单 项 的 名 称 。 单 击 第 2 列 上 
方 的 【添加 荣 单项】 按钮 国 ， 即 可 向 该 主 菜单 项 中 添加 一 个 子 菜单 项 。 在 右 侧 的 【文本 】 文 本 框 中 可 以 
重 命名 该 子 菜单 项 。 

要 向 子 菜单 中 添加 子 菜单 .首先 选择 要 向 其 中 添加 另 一 个 子 菜单 项 的 子 菜单 项 名 称 ， 然 后 在 【属性 】 
检查 器 中 单 击 第 3 列 上 方 的 【添加 菜单 项 】 按 钮 国 . 
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3. 删除 菜单 项 

在 【文档 】 窗 口中 选择 一 个 菜单 栏 构件 ， 在 【属性 】 检 查 器 中 选择 要 删除 的 主 菜单 项 或 子 菜 单项 的 
名 称 ， 然 后 单 击 【删除 菜单 项 】 按 钮 国 即 可 。 

Spry 选项 卡 式 面板 构件 是 一 组 面板 ,用户 可 通过 单 击 面板 上 的 选项 卡 来 隐藏 或 显示 存储 在 选项 卡 式 
面板 中 的 内 容 。 当 访问 者 单 击 不 同 的 选项 卡 时 ,构件 的 面板 会 相应 地 打开 。 
4. 插入 选项 卡 式 面板 

将 光标 置 于 要 插入 选项 卡 式 面板 构件 的 位 置 . 单 击 【插入 】 面 板 中 的 【Spry 选项 卡 式 面板 】 按 钮 . 
即 可 在 该 位 置 插入 一 个 Spry 选项 卡 式 面板 。 
5. 添加 选项 卡 式 面板 

选择 文档 中 的 选项 卡 式 面板 ,在 【属性 】 检 查 器 中 单 击 列表 上 面 的 【添加 面板 】 按 钮 出 ， 即 可 添加 
一 个 新 的 选项 卡 式 面板 。 然 后 ,在 文档 中 可 以 直接 修改 该 选项 卡 式 面板 的 名 称 。 
6. 删除 选项 卡 式 面板 

选择 文档 中 的 选项 卡 式 面板 构件 ， 在 【属性 】 检 查 器 的 列表 中 选择 要 删除 的 选项 卡 式 面板 名 称 ， 然 
后 单 击 列表 上 面 的 【删除 面板 】 按 钮 加 ， 即 可 将 该 选项 卡 式 面板 删除 。 


10.3.2 ”Spry 折 县 式 


Spry 折 午 式 面板 是 一 组 可 折 又 的 面板 ， 用 户 可 通过 单 击 面板 上 的 选项 卡 来 隐藏 或 显示 存储 在 折 荀 构 
件 中 的 内 容 。 当 单 击 不 同 的 选项 卡 时 ， 可 折 又 面板 会 相应 地 展开 或 收缩 。 在 折 寺 构件 中 ， 每 次 只 能 有 一 
个 内 容 面板 处 于 打开 且 可 见 的 状态 。 

1. 插入 折 和 又 式 面板 

将 光标 置 于 要 插入 折 县 式 面板 的 位 置 ， 单 击 【 插 入 】 面 板 中 的 【Spry 折 又 式 】 按 钮 ， 即 可 在 该 位 置 
插入 一 个 Spry 折 枉 式 面板 。 
2. 添加 选项 面板 

在 文档 中 选择 折 县 式 面 板 构件 ， 单 击 【属性 】 检 查 器 中 列表 上 面 的 【添加 面板 】 按 钮 国 ， 即 可 添加 
一 个 新 的 选项 面板 。 

3. 删除 选项 面板 

在 文档 中 选择 折叠 式 面板 ， 在 【属性 】 检 查 器 的 列表 中 选择 要 删除 的 选项 面板 的 名 称 ， 然 后 单 击 上 
面 的 【删除 面板 】 按 钮 国 即 可 。 

4. 打开 选项 面板 

将 光标 指针 移 到 要 在 文档 中 打开 的 选项 面板 的 选项 卡 上 , 然后 单 击 出 现在 该 选项 卡 右 侧 的 眼睛 图 标 . 
即 可 将 该 选项 面板 打开 。 


10.3.3 ”Spry 可 折合 面板 和 Spry 工具 提示 


用 户 单 击 可 折合 面板 的 选项 卡 即 可 隐藏 或 显示 存储 在 可 折 又 面板 中 的 内 容 。 
1. 插入 可 折叠 面板 

将 光标 置 于 要 插入 折 又 式 面板 的 位 置 ， 单 击 【 插 入 】 面 板 中 的 【Spry 可 折 双 面板】 按钮 ， 即 可 在 该 
位 置 插入 一 个 Spry 可 折 午 式 面板 。 
2. 打开 或 关闭 可 折 又 面板 

在 文档 中 ， 将 光标 指针 移 到 可 折 芭 面板 的 选项 卡 上 ， 然 后 单 击 出 现在 该 选项 卡 右 侧 中 的 眼睛 图 标 ， 
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即 可 打开 或 关闭 可 折叠 面板 。 

在 文档 中 选择 可 折叠 面板 ， 然 后 在 【属性 】 检 查 器 的 【显示 】 下 拉 列 表 中 选择 【打开 】 或 【已 关闭 】 
选项 ,也 可 打开 或 关闭 可 折枝 面板 。 

当 用 户 将 光标 移动 至 网 页 的 特定 元 素 上 时 . Spry 工具 提示 会 显示 预 设 的 提示 信息 。 选 择 要 添加 提示 的 元 
素 , 单 击 Spry 选项 卡 中 的 【Spry 工具 提示 】 按 钮 ， 即 可 创建 一 个 Spry 工具 提示 .此 时 可 以 在 面板 中 更 














在 [属性 ] 面板 中 ， 可 以 设置 Spry 工具 提示 与 鼠标 指针 的 相对 位 置 、 显 示 和 隐藏 工具 提示 的 延迟 时 
间 ， 以 及 显示 和 隐藏 工具 提示 时 的 过 渡 。 


ss | 


本 章 概要 性 地 介绍 如 何在 网 页 中 设计 数据 表格 ,为 本 书后 续 的 学 习 打 下 一 个 坚实 的 基础 。 本 章 主 要 
讲述 如 何 创建 表格 、 编 辑 表格 、Spry 框架 和 Spry 菜单 栏 ， 其 中 包括 制作 吸引 人 的 网 站 的 一 些 方法 和 相关 
技术 ， 接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进 行 实践 。 

10.4.1 实战 : 制作 购物 车 页 

在 网 络 商城 购物 时 ， 当 选择 某 一 商品 后 ， 该 商品 将 会 自动 放 在 购物 车 中 ， 然 后 用 户 可 以 继续 购物 。 

当选 择 完 所 有 所 需 的 商品 后 ， 网 站 将 会 将 这 些 商 品 以 表格 的 形式 逐个 列举 出 来 。 本 练习 将 使 用 表格 制作 


购物 车 页 面 . 主要 练习 插入 表格 、 设置 表格 属性 、 设置 单元 格 属性 、 族 套 表格 、 设 置 文本 属性 , 如 图 10-21 
所 示 。 











村 对 洒 和 信息 3 大 功 提交 订单 





图 10-21 制作 购物 车 页 


STEP|01 打开 素材 页 面 “index.html”. 将 光标 置 于 功 为 carList 的 Div 层 中 , 单 击 【 插 入 ]】 面板 中 的 Table 
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按钮 . 创建 一 个 10 行 x7 列 .【 宽 】 为 “880 像素 ”的 表格 . 并 在 【属性 】 检 查 器 中 设置 【填充 】 为 4、【 间 
距 】 为 1、 【对齐 】 方 式 为 【居中 对 齐 】， 如 图 10-22 一 图 10-24 所 示 。 
Table [| 


| 小 






































<div id="carList"1| 和 
































<fdiv> 


图 10-22 CSS 样式 代码 图 10-23 Table 对 话 框 
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图 10-24 【属性 】 面 板 


STEP|02 在 标签 栏 选择 table 标签 ,在 CSS 样式 中 设置 表格 【背景 颜色 】 为 “ 蓝 色 ”(#aacded) 。 然 后 选 
择 所 有 单元 格 . 在 【属性 】 面 板 中 设置 【背景 颜色 】 为 “白色 ”( 手 FFFFF) ， 如 图 10-25 和 图 10-26 所 示 。 








EEC 
+ 一 属性 

回回 EE 
图 消 景 


图 10-25 table 标签 的 CSS 样式 


图 | 单元 格 。 水平 上 [Bi =] 亮 0D| | 不 换行 D) 口 表 果 基色 人 9) 厂 :| 5TTFT7 |。 [二 页 硬性 
一 厂区 看 直 mEENA “| 高 | 标题 @) 口 a 


图 10-26 单元 格 【属性 】〗 面 板 


STEP|03 选择 第 1 行 和 最 后 1 行 中 的 所 有 单元 格 .在 [属性] 检查 器 中 设置 [背景 颜色 ] 为 " 蓝 色 ” (#ebf4fb)， 
如 图 10-27 所 示 。 
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图 10-27 单元 格 【属性 】 面 板 
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STEP|04 设置 第 1 行 单元 格 的 [2 为 35、 最 后 1 行 单元 格 的 【高 】 为 40。 在 第 1 行 输入 文本 . 设 
置 【 水 平 】 对 齐 方 式 为 【居中 对 齐 】， 最 后 1 行 单元 格 【 水 平 】 对 齐 方式 为 【 右 对 齐 】， 如 图 10-28 和 
图 10-29 所 示 。 























9m -= -A ~ 和 = 
Ec | 8 
[ 国 ] 章 元 格 水平 四 [ 属 对 并 =] 克 ET TS i 
x MW) 本 四 品 








图 10-28 第 1 行 单元 格 的 【〖 属 性】 面板 





< HL 目标 规则 body, td th ”| 字体) 吕 只 字体 - 四 ~ 医 毛 己 慎 ® 
[本 css] [CMa [css msiee] 大 cz -em 7 | = 








转生 水 平 2)[ 右 对 齐 。 =] 更 胃 | | 不 换行 o) 门 。 背 果 其 色 G) | seoctn 
一 十 光 要 下 中国 A -高 0 如 标题 中 门 风 











图 10-29 最 后 1 行 的 【属性 〗 面 板 


STEP|05 合并 最 后 1 行 单元 格 . 然后 分 别 在 单元 格 中 输入 相应 的 文本 ,在 【属性 】 检 查 器 中 设置 第 2 一 
9 行 的 第 3 一 7 列 单元 格 【水 平 】 对 齐 方式 为 【居中 对 齐 】、 【高 】 为 30， 如 图 10-30 和 图 10-31 所 示 。 
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图 10-30 【属性 】 面 板 
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和 重 量 总 计 : T432kg 原始 全 新 人 :了 10023.80 元 - 返 现 : 羊 000 元 
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商品 总 爹 突 (不 含 运 费 ): 站 10023.30 元 











图 10-31 页 面 效果 


STEP|06 在 Css 样式 属性 中 . 分 别 创 建 类 名 称 为 font3、font4、font5 的 文本 样式 。 然 后 选择 第 1 行 所 有 
单元 格 , 在 【属性 】 检 查 器 中 设置 【类 】 为 font3 ， 选 择 第 2 一 9 行 的 第 2 列 设置 【类 】 为 font5， 选 择 第 
3 列 设置 【类 】 为 font4， 如 图 10-32 一 图 10-34 所 示 。 
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+ 一 属性 + 一 属性 
回 口 EE 国 回 名 县 
TT| 文本 于 | 文本 
color : | 国 #444444 color : [| #ffo000 

图 10-32 第 1 行 所 有 单元 格 设置 【类 】〗 为 font3 图 10-33 第 3 列 设置 【类 】 为 font4 


STEP|07 将 光标 置 于 表格 外 部 . 单 击 【插入 】| HTML | Table 按钮 , 弹出 Table 对 话 框 , 创建 一 个 2 行 x1 
列 .【 宽 】 为 “870 像素 ”的 表格 .如 图 10-35 所 示 。 









































行 数 : 2 到 :1 
表格 宽度 : 870 像素 =] 
边框 想 细 : 0 售 素 
单元 格 边 琵 : 0 贺 
单元 格 间距 : 0 国 
: 二 E33 两 看 
+ 一 属性 标题- 
回回 EE 
国 文本 
color : 恩 | #005ea7 
图 10-34 第 2~9 行 的 第 2 列 设置 【类 】 为 font5 图 10-35 Table 对 话 杠 


STEP|08 然后 在 【属性 】 面 板 中 设置 表格 【水 平 】 对 齐 方式 为 【居中 对 齐 】;【 填 充 】 为 4;【 间 距 】 为 1、 
单元 格 的 【背景 颜色 】 为 “白色 ” (三 FFFFF) 以 及 第 1 行 单元 格 【 高 】 为 30。 在 CSS 样式 属性 中 设置 
了 D 为 table2 样式 ,选择 表格 在 【属性 】 面 板 中 设置 【类 】 为 table2， 如 图 10-36 和 图 10-37 所 示 。 



























































国 | a 行 四 | 次 困 Fo [人 来 =] Cairar Alim[ 居 中 对 齐 aas 无 ~ ® 
一 jiu -ca | 攻 IST Go 3 
CE Li logm 
Bb a 
图 10-36 表格 【属性 】〗 面 板 
《》 mL 。 目标 规则 “条 内 联 样式 > Ee ~ -| -天竺 当 二 ® 
本 css] [ 编 加 规则 “| [Cs5 Desiener ] 大 小 5) -| -可 | ] 加 
七 单元 格 ”水 平 吕 | 屋 认 =] 竟 轨 | | 不 换行 Wm) 四。 至 景 基色 C) 厂 -| 777777 
一 站 可 m 欧 A -| 融 0 司 。 标量 四 门 机 








图 10-37 设置 第 1 行 单元 格 【 高 〗 为 30 
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STEP|09 然后 . 在 第 一 行 插入 图 像 并 输入 文本 . 在 CSS 样式 属性 中 设置 类 名 称 为 font6 的 样式 .并 选择 
文本 添加 ， 如 图 10-38 和 图 10-39 所 示 。 























font6 
+ 一 属性 
画 目 EI 
文本 
color : [WE| #2d72b6 
font-weight  : bold 
% 选 超 值 礼品 ， 获 更 多 优惠 font-size : 14 px 
图 10-38 页 面 效 果 图 10-39 font6 样式 


STEP|10 将 光标 置 于 第 2 行 单元 格 中 , 单 击 【 插 入 】 面 板 中 的 【表格 】 按 钮 .创建 一 个 1 行 x8 列 、【 宽 】 
为 “860 像素 ”的 表格 ， 并 在 【属性 】 检 查 器 中 设置 【水 平 】 对 齐 方式 为 【居中 对 齐 】， 并 设置 每 个 单元 
格 的 【背景 颜色 】 为 “白色 。 然 后 在 单元 格 中 插入 图 像 . 在 <td> 标 签 中 ,插入 <span></span> 标 签 ， 并 输 
入 文本 。 最 后 再 插入 <img> 标 签 。 如 图 10-40 一 图 10-42 所 示 。 























表格 行 中 | 宽 0) 860 | 全 素 =] Cap 0 Nim[ 届 中 对 齐 =] clsss 无 


Cols 8 ‘ellSpace 0 Border 0 
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图 10-40 表格 【属性 〗 面 板 


<td width="19e" bgcolor="#FFFFFF"> <img src="images/bc64dabd-9ccb-4caf-bedf-5f21efobfb7e.jpg" width="1e0" height="75" /></td> 
<td width="137" bgcolor="#FFFFFF"><span class="font5"> 小 助手 绊 能 不 模 攀 站 裕 提 锅 1 .4LWwL57-1.4</span><br /> 

<span clLass="font4"> 仅 需 疗 119.66 元 </span><br /> 

<br /> 

<a href="#"><img src=nimages/addcart2.gifw width="89w height="28" border="e" /></a></td> 


图 10-41 CSS 样式 代码 


欧珀莱 均 科 售 澶 杀 齐 |: 资生堂 水 之 蔚 请 荣 饶 修 L 水 助 丰 综 能 不 柄 钢 真空 ;三 
有 均 作 水 必修 护 吉 908 小 醒 方 洗 发 器 600ml 4LWL7-14 本 
下 儿 短 了 119.00 元 狐 标 了 4790 元 猴 需 ¥¥119.00 元 
人 Ei 尼 加 入 购物 车 ee 


图 10-42 页 面 效 果 





10.4.2 ”实战 : 制作 产品 展示 页 


产品 展示 页 为 了 尽 可 能 地 展示 较 多 的 产品 ， 通 常会 将 其 设计 得 较 长 ， 这 样 就 导致 用 户 浏 览 起 来 非常 
不 方便 。 如 果 在 网 页 中 使 用 Spry 折 茎 式 面板 ， 则 可 以 解决 这 个 问题 ， 既 节约 空间 ,又 可 以 展示 大 量 的 产 
品 。 本 例 将 运用 Spry 折叠 式 来 制作 产品 展示 页 面 . 主要 练习 插入 Spry 折叠 式 、 设 置 Spry 折叠 式 、 设 置 
Spry 折 奏 式 的 CSS 样式 .如 图 10-43 所 示 。 
STEP|01 新 建文 档 ， 在 标题 栏 输入 “户外 度假 网 "， 如 图 10-44 所 示 。 
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图 10-43 ”制作 产品 展示 页 


















































文档 并 型 : {Em 
DD mx 广 无 Bootstrap 
和 
届 w | 于 过 4 
于 sc 
EJsenint = 
[i 和 文 村 天 型: HTML5 
Sn 
办 加 CSS: -| 
本 sm 
需 juL 模板 
号 ne 模板 
本 流体 同 格 胆 版 ) 
总 器 全 号 Extact 从 Photoshop 复合 中 榴 带 天 硬 
Tm 








图 10-44 【新 建文 档 〗 对 话 框 





STEPI02 单 击 【 属 性 】 面 板 中 的 【页 面 属性 】 按 钮 ， 在 弹出 的 【页 面 属性 】 对 话 框 中 设置 参数 ， 如 
10-45 和 图 10-46 所 示 。 

















Xx 目标 规则 《8 内 联 样式 > ~ | 字体 0 名 黑 认 字体 加 = =- 王 对 省 曙 加 
bh css 编辑 规则 ] [CSS Desiener ] | 大 小 GS) 无 - -] 国 3 
EE | | 











图 10-45 【属性 】 面 板 


STEP103 然后 . 单 击 【插入 】| HIML | Div 按钮 ， 弹 出 【插入 Div】 对 话 框 . 创建 作为 top 的 Div 层 . 
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四 sl ess) 
OL) 页 面 字体 F):， 辟 默 认 字 体 ~ ~ 四 
3 | 
村 文本 舌 色 m): 国 
共 景 面色 @): 加 | 
肯 晤 国保) ED 
重 夏 @) - 
#top { 
kb:0 ss) wm: Css) background-image: url(images/top.png); 
Lb): 0 (en) Tw 0): 9 per) height: 285px; 
width pxj 
Ev Eu em eg | ) “PY: "os 
图 10-46 【页 面 属 性 〗】 对 话 框 图 10-47 top 层 CSS 样式 





STEP|04 将 光标 置 于 ID 为 top 的 Div 层 的 下 方 , 单 击 [ 插 入 Div 标签 ] 按 钮 ,分 别 创建 ID 为 main .footer、 
copyright 的 Div 层 ， 并 设置 其 CSS 样式 属性 ， 如 图 10-48 一 图 10-50 所 示 。 















#footer { 
background-co e5j Soopyry ght { 

#main { display: k display: block 
display: ; float: height: 3 
height: height: width: 16 
width: 了 width: 


; 
float: - margin-top 


float: left 
padding-top: 


margin-left: § text-align G 
margin-top: ; padding-top: 16px; text-align: 
} } } 
图 10-48 main 层 CSS 样式 图 10-49 footer 层 CSS 样式 图 10-50 copyright 层 CSS 样式 








STEP|05 将 光标 置 于 ID 为 top 的 Div 层 中 ， 单 击 【 插 入 Div 标签 】 按 钮 ， 创 建 ID 为 menu 的 Div 层 ， 
并 设置 其 CSS 样式 。 然 后 ， 将 光标 置 于 该 层 中 并 输入 文本 ， 如 图 10-51 所 示 。 

STEP|06 选择 文本 并 在 【属性 】 检 查 器 中 设置 【链接 】 为 “#  。 将 光标 置 于 ID 为 main 的 Div 层 中 , 分 
别 创建 作为 left、right 的 Div 层 ， 并 设置 其 CSS 样式 ， 如 图 10-52 所 示 。 


#Left { 
display: 











#top #menu { 








display: block; } 

ee ; #right { 

a ee display: block; 
ee float: 1 
margin-top: 30px; Ce 
font-family: "宋体 "; height 
letter-spacing: ipx; width: 6 
font-size: 14px; margin-left: 9px; 


} } 
图 10-51 menu 层 CSS 样式 图 10-52 left 层 、right 层 CSS 样式 
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STEP|07 然后 ， 将 光标 置 于 ID 为 left 的 Div 层 中 , 谋 套 人 D 为 leftcolumn 的 Div 层 . 并 设置 其 CSS 样式 
属性 ， 如 图 10-53 所 示 。 
STEP108 将 光标 置 于 ID 为 leftcolumn 的 Div 层 中 并 输入 文本 .然后 选择 文本 ， 在 【属性 】 检 查 器 中 设 


置 文本 链接 。 在 该 层 下 方 嵌 套 ID 为 news 的 Div 层 . 并 设置 其 CSS 样式 属性 ， 如 图 10-54 所 示 。 











#LeftcoLumn { 
background-image: url(images/leftcolumn.png); 
display: block; 
height: 22px; 
width: 296px; 
float: left; 
padding-top: 10px; 





List-style-image: url(images/fh.jpg)s 
List-styLe-type: none; 
letter-spacing: , 











padding-left: 45px; padding-top: 15px; 
font-size: 14px; display: block; 
} } 
图 10-53 ”leftcolumn 层 CSS 样式 图 10-54 news 层 CSS 样式 


STEP|09 将 光标 置 于 ID 为 news 的 Div 层 中 ,输入 文本 。 单 击 【 属 性 】 检 查 器 中 的 【项 目 列表 】 按 钮 ， 
然后 按 Enter 键 , 在 项 目 列表 符号 后 输入 文本 , 以 此 类 推 . 选择 ID 为 news 中 的 文本 , 依次 设置 文本 链接 。 
然后 , 将 光标 置 于 ID 为 tight 的 Div 层 中 , 分 别 谋 套 了 D 为 rightcolumn、rightlist 的 Div 层 , 并 设置 其 CSS 
样式 属性 ， 如 图 10-55 和 图 10-56 所 示 。 


#rightcolumn { 
background-image: urL(images/rightcoLumn.png); 
display: block; 























padding-top: 





padding-left: 45px; margin-top: 4 
font-size: 14px; margin-left: 2px; 
可 } 
图 10-55 rightcolumn 层 CSS 样式 图 10-56 ”rightlist 层 CSS 样式 


STEP|10 在 ID 为 rightcolumn 的 Div 层 中 输入 文本 . 并 在 【属性 】 检 查 器 中 设置 文本 链接 。 将 光标 置 于 
了 D 为 tightlist 的 Div 层 中 , 单 击 【 插 入 】 面 板 【 布 局 】 选 项 中 的 【Spry 折 又 式 】 按 钮 ， 插 入 Spry 折 靶 式 
面板 ， 如 图 10-57 所 示 。 



















， 要 而 丝 最 新 未 蛋 料 推荐 
， 要 而 丝 元 日 大 
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动 正 式 开始 















时 
| 
| SRE Wn 
: 到 泊 物语 | 


绿色 心 情 生日 蛋 疾 美好 回忆 








图 10-57 页 面 效 果 
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STEP|11 单 击 【Spry 折 又 式 】 蓝 色 区 域 . 在 【属性 】 检 查 器 中 单 击 【 添 加 面板 】 按 钮 。 然 后 ， 依 次 选择 
标签 进行 修改 ， 如 图 10-58 所 示 。 























图 10-58 页 面 效果 


单 击 “ 蛋 糕 系列 ”的 折 又 式 面板 右 侧 的 【显示 面板 内 容 】 按 钮 ， 将 光标 置 于 内 容 1 中 . 插入 一 个 2 
行 *4 列 且 【 宽 】 为 “100 像素 ”的 表格 .如 图 10-59 所 示 。 





FF 玫 格 行 ®) 2 赛 ) 100 | 全 素 =| calpsdo Ni [时 认 w| Csss 无 加 


] 





1 








图 10-59 表格 【属性 】 面 板 


STEP|12 然后 , 在 第 1 行 单元 格 中 插入 图 像 .在 第 2 行 单元 格 中 输入 相应 的 文本 并 设置 链接 。 按 照相 同 
的 方法 ,设置 面板 “面包 系列 "、“ 茶 点 系列 ”内 容 ， 如 图 10-60 所 示 。 


| 











花生 开心 类 奶油 由 关 利根 





香 棕 芝麻 梯 





图 10-60 页 面 效 果 


STEP|13 打开 【CSS 样式 】 面 板 . 设置 SpryAccordion.css 中 的 样式 。 将 光标 置 于 ID 为 footer 的 Div 层 
中 ,输入 文本 并 设置 文本 链接 。 然 后 ,将 光标 置 于 ID 为 copyright 的 Div 层 中 . 输入 文本 。 在 CSS 样式 
中 定义 a 标签 的 文本 颜色 、 去 掉 下 画 线 及 a: hover 的 复合 标签 文本 颜色 ， 添 加 下 划 线 属性 ， 如 图 10-61 
所 示 。 








a:hover { 
color: = | 
text-decoration: 


图 10-61 CSS 样式 代码 





是 可 扩展 超 文本 标记 语言 ， 是 一 种 置 标语 言 ， 表 现 方式 与 超 文本 标记 语言 (HIML) 类 似 ， 

不 过 语法 上 更 加 严格 。HIML 是 一 种 基本 的 Web 网 页 设计 语言 ，XHTML 是 一 个 基于 可 扩展 标记 语言 
标记 语言 ， 本 质 上 说 ，XHTML 是 一 个 过 渡 技 术 ， 结 合 了 部 分 XML 的 强大 功能 及 大 多 数 HIML 的 简单 
特性 。 在 Dreamweaver 软件 中 设计 网 页 ， 除 了 可 以 通过 可 视 化 的 界面 操作 ， 还 可 以 在 【代码 】 视 图 中 使 
用 标记 语言 。 网 页 文档 中 每 一 个 可 视 的 元 素 都 与 XHTML 中 的 标记 相对 应 ,例如 图 像 元素 可 以 用 img 标 
记 表 示 、 表 格 元 素 可 以 用 table 标记 表示 。 

本 章 主 要 介绍 XHTML 概述 、XHTML 基本 语法 、 元 素 分 类 、 常 用 元 素 和 综合 实战 。 通 过 本 章 的 学 
习 我 们 可 以 知道 ,在 网 站 建设 中 怎样 运用 XHTML 基本 语法 、 元 素 分 类 和 常用 元 素 ， 以 及 如 何在 
Dreamweaver 中 进行 简单 的 页 面 布局 。 
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xHv 概述 


XHTML (The Extensible HyperText Markup Language. 可 扩展 的 超 文 本 标记 语言 ) 是 由 HIML (Hyper 
Text Markup Language， 超 文本 标记 语言 ) 发 展 而 来 的 一 种 网 页 编写 语言 ， 也 是 目前 网 络 中 最 常见 的 网 页 
编写 语言 。 

XHTML 用 标记 来 表示 网 页 文档 中 的 文本 及 图 像 等 元 素 ， 并 规定 浏览 器 如 何 显示 这 些 元 素 ， 以 及 如 
何 响应 用 户 的 行为 。 例 如 ，<img> 标 记 表 示 网 页 中 的 一 个 图 像 元 素 ， 也 就 是 说 ,除了 执行 【插入 】| 【图 
像 】 命 令 , 或 者 单 击 【插入 】 面 板 中 的 【图 像 】 按 钮 可 以 在 网 页 中 插入 图 像 外 ， 还 可 以 直接 在 【代码 】 
视图 中 要 显示 图 像 的 位 置 输入 <img> 标 记 。 

在 Dreamweaver 中 ， 用 户 通常 使 用 【属性 】 面 板 来 设置 网 页 元 素 的 尺寸 、 样 式 等 属性 ， 而 在 标记 中 
同样 可 以 设置 网 页 元 素 的 属性 。 例 如 设置 图 像 的 大 小 ， 通 常 的 做 法 是 在 【属性 】 面 板 的 【宽度 】 和 【高 
度 ] 文 本 框 中 输入 像素 值 , 而 在 <img> 标 记 中 只 需 加 入 width 和 height 属性 ,并 指定 相应 的 值 即 可 ,如 “<img 
width = "300px" height ="200px">"。 

与 其 他 的 标记 语言 HIML 和 XML 相 比 ， XHTML 兼顾 了 两 者 的 实际 需要 ， 具有 如 下 特点 。 

(1) 用 户 可 以 扩展 元 素 ， 从 而 可 以 扩展 功能 ,但 目前 用 户 只 能 够 使 用 固定 的 预定 义 元 素 ， 这些 元 素 
基本 上 与 HTML 的 元 素 相同 ， 但 删除 了 描述 性 元 素 的 使 用 。 

(2) 能 够 与 HTML 很 好 地 沟通 ， 可 以 兼容 当前 不 同 的 网 页 浏览 器 ， 实 现 正 确 浏览 XHTML 网 页 。 

总 之 , XHTML 是 一 种 标准 化 的 语言 , 不 仅 拥 有 强大 的 可 扩展 性 , 还 可 以 向 下 兼容 各 种 仅 支持 HTML 
的 浏览 器 ,已 经 成 为 当今 主流 的 网 页 设计 语言 。 


112 


相 比 传统 的 HIML 4.0 语言 ,XHTML 语言 的 语法 更 加 严谨 和 规范 ， 更 易于 各 种 程序 解析 和 判读 。 
本 节 主 要 讲述 XHTML 基本 语法 . 其 中 包括 XHTML 文档 结构 、XHTML 文档 类 型 声明 .、 XHTML 语法 规 
范 和 XHTML 标准 属性 。 用 户 通过 对 本 节 的 学 习 ， 可 以 了 解 XHTML 标记 语言 。 


11.2.1 XHTML 文档 结构 


作为 一 种 有 序 的 结构 性 文档 ，XHTML 文档 需要 遵循 指定 的 文档 结构 。 一 个 XHTML 文档 应 包含 两 
个 部 分 ， 即 文档 类 型 声明 和 XHTML 根 元 素 部 分 。 

在 根 元 素 <html> 中 ， 还 应 包含 XHTML 的 头 部 元 素 <head> 与 主体 元 素 <body>。 在 XHTML 文档 中 ， 
内 容 主要 分 为 三 级 ， 即 标签 、 属 性 和 属性 值 。 
1. 标签 

标签 是 XHTML 文档 中 的 元 素 . 其 作用 是 为 文档 添加 指定 的 各 种 内 容 。 例 如 .输入 一 个 文本 段落 ， 
可 使 用 段落 标签 <p> 等 。XHTML 文档 的 根 元 素 <html>、 头 部 元 素 <head> 和 主体 元 素 <body> 等 都 是 特殊 的 


标签 。 
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2. 属性 

属性 是 标签 的 定义 ,其 可 以 为 标签 添加 某 个 功能 。 几 乎 所 有 的 标签 都 可 以 添加 各 种 属性 。 例 如 ， 为 
某 个 标签 添加 CSS 样式 .可 为 标签 添加 style 属性 。 

3. 属性 值 

属性 值 是 属性 的 表述 ， 用 于 为 标签 的 定义 设置 具体 的 数值 或 内 容 程 度 。 例 如 ， 为 图 像 标 签 <img> 设 
置 图 像 的 URL 地 址 . 就 可 以 将 URL 地 址 作为 属性 值 ， 添 加 到 src 属性 中 。 


11.2.2 XHTML 文档 类 型 声明 


文档 类 型 声明 是 XHTML 语言 的 基本 声明 ， 其 作用 是 说 明 当前 文档 的 类 型 以 及 文档 标签 、 属 性 等 的 
使 用 范本 。 文 档 类 型 声明 的 代码 应 放置 在 XHTML 文档 的 最 前 端 , XHTML 语言 的 文档 类 型 声明 主要 包 
括 三 种 ， 即 过 渡 型 、 严 格 型 和 框架 型 。 

1. 过 渡 型 声明 

过 渡 型 的 XHTML 文档 在 语法 规则 上 最 为 宽松 ， 人 允许 用 户 使 用 部 分 描述 性 的 标签 和 属性 。 其 声明 的 

代码 如 下 : 





























<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: 

//www.w3.org/TR/xhtml1/DTD/xzhtml 1-transitional.dtd"> 
2. 严格 型 声明 

严格 型 的 XHTML 文档 在 语法 规则 上 最 为 严格 ， 其 不 允许 用 户 使 用 任何 描述 性 的 标签 和 属性 。 其 声 
明 的 代码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// 

WwW .Ww3.0rg/TR/xhtml1/DTD/xhtmll1— strict.dtd"> 
3. 框架 型 声明 

框架 的 功能 是 将 多 个 XHTML 文档 嵌入 到 一 个 XHTML 文档 中 ， 并 根据 超 链 接 确 定 文档 打开 的 框架 
位 置 。 框 架 型 的 XHTML 文档 具有 独特 的 文档 类 型 声明 如 下 所 示 : 








<!DOCTYPE html PUBLIC "-//W3C//DTD 
XHTML 1.0 Frameset//EN" "http:// 
WWW.W3.0rg/TR/xhtml1/DTD/xhtml1— frameset.dtd"> 


11.2.3 XHTML 语法 规范 


XHTML 是 根据 XML 语法 简化 而 成 的 .因此 它 遵循 XML 的 文档 规范 .虽然 某 些 浏览 器 (例如 Intemet 
Explorer 浏览 器 ) 可 以 正常 解析 一 些 错误 的 代码 ， 但 仍然 推荐 使 用 规范 的 语法 编写 XHTML 文档 。 因 此 . 
在 编写 XHTML 文档 时 应 该 遵循 以 下 几 点 。 

1. 声明 命名 空间 

在 XHTML 文档 的 根 元 素 <html> 中 应 该 定义 命名 空间 ， 即 设置 其 xmlns 属性 ， 将 XHTML 各 种 标签 

的 规范 文档 URL 地 址 作为 xmlns 属性 的 值 。 
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2. 闭合 所 有 标签 

在 HIML 中 , 通常 习惯 使 用 一 些 独立 的 标签 ， 例 如 <p>、<1i> 等 ， 而 不 会 使 用 相对 应 的 <p> 和 </li> 
标签 对 其 进行 闭合 。 在 XHTML 文档 中 . 这样 做 是 不 符合 语法 规范 的 。 

如 果 是 单独 不 成 对 的 标签 ， 应 该 在 标签 的 最 后 加 一 个 “/” 对 其 进行 闭合 . 例如 <br 放 、<img 人 >。 
3. 所 有 元 素 和 属性 必须 小 写 

与 HTML 不 同 ,XHTML 对 大 小 写 十 分 敏感 ,所 有 的 元 素 和 属性 必须 是 小 写 的 英文 字母 ,例如 .<html> 
和 <HTMI> 表 示 不 同 的 标签 。 
4. 所 有 属性 必须 用 引号 括 起 来 

在 HTML 中 .可 以 不 为 属性 值 加 引号 ,但 是 在 XHTML 中 则 必须 加 引号 ,例如 “<table width = 
"120"></table>"。 

另外 ,在 某 些 特殊 情况 下 (例如 ， 引 号 的 谋 套 )， 可 以 在 属性 值 中 使 用 双 引 号 “"” 或 单 引号 “"。 
5. 合理 府 套 标签 

XHTML 要 求 具有 严谨 的 文档 结构 ， 因 此 所 有 的 谋 套 标签 都 应 该 按 顺 序 。 也 就 是 说 ,元 素 是 严格 按 
照 对 称 的 原则 一 层 一 层 地 凡 套 在 一 起 的 。 

洪 误 婚 套 示例 如 下 : 




















<div><span></div></span> 


正确 谋 套 示例 如 下 : 





<div><span></span></div> 
在 XHTML 的 语法 规范 中 还 有 一 些 严格 的 炭 套 要 求 ， 例如， 某 些 标签 中 严禁 嵌 套 一 些 类 型 的 标签 
如 表 11-1 所 示 。 
表 11-1 媒 套 要 求 
禁止 谋 套 的 标签 


object. big. img、small、 sub、sup 


input、 textarea、 label、 select、 button. form、 iftrame. fieldset、 isindex 





6. 所 有 属性 都 必须 被 赋值 
在 HIML 中 ， 人 允许 没有 属性 值 的 属性 存在 ,例如 <td nowrop>。 但 在 XHTML 中 ， 这 种 情况 是 不 允 
许 的 ， 如 果 属 性 没有 值 ， 则 需要 使 用 自身 来 赋值 ， 例 如 : 





<td nowrop = "nowrop"> 


7. 所 有 特殊 符号 用 编码 表示 

在 XHTML 中 ,必须 使 用 编码 来 表示 特殊 符号 。 例 如 ， 小 于 号 “<” 不 是 元 素 的 一 部 分 ， 必 须 被 纺 
码 为 “&lt";， 大 于 号 “>” 也 不 是 元 素 的 一 部 分 ,必须 被 编码 为 “&gt;"。 不 要 在 注释 内 容 中 使 用 “-”。 
“~” 只 能 出 现在 XHTML 注释 的 开头 和 结束 .也 就 是 说 .在 内 容 中 它们 不 再 有 效 。 

错误 写法 示例 如 下 
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正确 写法 示例 如 下 : 





<!-- 注 灵 一 一 一 一 一 一 一 一 注释 --> 


8. 使 用 id 属性 作为 统一 的 名 称 
XHTML 规范 废除 了 name 属性 ， 而 使 用 id 属性 作为 统一 的 名 称 。 在 正 4.0 及 以 下 版 本 中 应 该 保留 
name 属性 ， 使 用 时 可 以 同时 使 用 name 和 id 属性 。 


11.2.4 XHTML 标准 属性 
标准 属性 是 绝 大 多 数 XHTML 标签 可 使 用 的 属性 。 在 XHTML 的 语法 规范 中 ， 有 三 类 标准 属性 ， 即 
核心 属性 、 语 言 属性 和 键盘 属性 。 
1. 核心 属性 
核心 属性 的 作用 是 为 XHTML 标签 提供 样式 或 提示 的 信息 。 其 主要 包括 以 下 4 种 ， 如 表 11-2 所 示 。 


表 11-2 核心 属性 























为 XHTML 标签 添加 类 ， 供 脚本 或 CSS 样式 引用 
为 XHTML 标签 添加 编号 名 ， 供 脚本 或 CSS 样式 引用 


为 XHTML 标签 编写 内 联 的 CSS 样式 表 代码 
为 XHTML 标签 提供 工具 提示 信息 文本 





在 上 面 的 4 种 属性 中 ,class 属性 的 值 为 以 字母 和 下 画 线 开 头 的 字母 、 下 画 线 与 数字 的 集合 : id 属性 
的 值 与 class 属性 类 似 ， 但 其 在 同一 XHTML 文档 中 是 唯一 的 ， 不 允许 发 生 重复 ; syle 属性 的 值 为 CSS 
oo 

. 语言 属性 

XHTML 语言 的 语言 属性 主要 包括 两 种 ， 即 dir 属性 和 lang 属性 。 

dir 属性 的 作用 是 设置 标签 中 文本 的 方向 ， 其 属性 值 主要 包括 ltr ( 自 左 至 右 ) 和 rt ( 自 右 至 左 ) 
两 种 。 

lang 属性 的 作用 是 设置 标签 所 使 用 的 自然 语言 . 其 属性 值 包括 en-us (美国 英语 )、zh-cn (标准 中 文 ) 
和 zh-tw (繁体 中 文 ) 等 多 种 。 
3. 键盘 属性 

XHTML 语言 的 键盘 属性 主要 用 于 为 XHTML 标签 定义 响应 键盘 按键 的 各 种 参数 . 其 同样 包括 两 种 . 
即 accesskey 和 tabindex。 其 中 , accesskey 属性 的 作用 是 设置 访问 XHTML 标签 所 使 用 的 快捷 键 , tabindex 
属性 则 是 用 户 在 访问 XHTML 文档 时 使 用 Tab 键 的 顺序 。 


OE 


在 传统 布局 中 ， 网 页 设计 者 通常 使 用 布局 三 元 素 : <table>、<tr> 和 <td>。 而 在 标准 网 页 下 ， 还 需要 
使 用 更 多 的 元 素 。 根据 这 些 元 素 的 显示 状况 . XHTML 元 素 被 分 为 三 种 类 型 。 本 节 主 要 讲述 元 素 的 三 种 类 
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型 ， 其 中 包括 块 状元 素 、 内 联 元 素 、 可 变 元 素 。 用 户 通 过 对 本 节 的 学 习 ， 可 以 了 解 元 素 有 几 种 类 型 、 都 
是 什么 元 素 。 


11:3.1 据 状 元 素 


块 状元 素 (Block Element) 在 网 页 中 以 块 的 形式 显示 . 所谓 块 状 也 就 是 元 素 显示 为 矩形 区 域 。 常 见 
的 块 状元 素 包括 div、hl~h6、p、table 和 ul 等 。 

在 默认 情况 下 ， 块 状元 素 都 会 占据 一 行 . 也 就 是 说 ， 相 邻 的 两 个 块 状元 素 不 会 并 列 显示 ， 它 们 会 按 
照 从 上 至 下 的 顺序 进行 排列 。 但 是 ,用 CSS 可 以 改变 这 种 分 布 方 式 . 并且 可 以 定义 它们 的 宽度 和 高 度 。 

块 状元 素 一 般 都 作为 其 他 元 素 的 容器 ， 它 可 以 容纳 内 联 元 素 和 其 他 块 状元 素 ， 这 样 可 以 方便 为 网 页 
布局 。 


11.3.2 ”内 联 元 素 


联 元 素 一 般 都 是 基于 语义 级 (Semantic) 的 基本 元 素 。 任 何不 是 块 状元 素 的 可 见 元 素 都 可 以 称 为 
内 联 元 素 。 
内 联 元 素 的 表现 特性 就 是 行内 布局 的 形式 ， 也 就 是 说 其 表现 形式 始终 以 行内 逐个 进行 显示 。 例 如 ， 
设置 一 个 内 联 元 素 为 多 行 显示 ， 则 每 一 行 的 下 面 都 会 有 一 条 空白 。 如 果 是 块 状元 素 ， 那么 所 显示 的 空 
只 会 在 块 的 最 下 方 出 现 。 

联 元 素 较为 灵活 ， 可 以 随行 移动 、 谋 入 行内 ,不 会 排斥 同行 其 他 元 素 , 也 没有 自己 的 形状 ， 它 会 
随 包含 内 容 的 形状 变化 而 变化 。 常 用 的 内 联 元 素 包 括 span、a、img 等 。 


11.3.3 ”可 变 元 素 


变 元 素 是 根据 上 下 文 关 系 来 确定 元 素 是 以 块 状元 素 显示 ， 还 是 以 内 联 元 素 显 示 。 不 过 可 变 元 素 仍 
然 属 于 上 述 两 种 元 素 类 型 .一 旦 上 下 文 关系 确定 了 它 的 类 别 ， 它 就 会 遵循 块 状 元 素 或 者 内 联 元 素 的 规则 
限制 。 
常见 的 可 变 元 素 包 括 applet (Java Applet) 、button (按钮 ) 、del (删除 文本 )、iframe (内 赃 框 架 )、ins 
(插入 文本 )、map (图 像 映射 )、object (Object 对 象 )、script (客户 端 脚本 ) 。 
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XHTML 网 页 是 由 块 状元 素 、 内 联 元 素 和 可 变 元 素 组 合 在 一 起 的 ， 在 设计 网 页 之 前 ,首先 需要 了 解 
这 些 常用 元 素 。 本 节 主 要 讲述 三 种 常用 元 素 ， 其 中 包括 常用 的 块 状元 素 、 常 见 的 内 联 元 素 、 常 见 的 可 变 
元 素 。 用 户 通过 对 本 节 的 学 习 ， 可 以 了 解 都 有 哪些 常见 元 素 、 都 是 什么 元 素 。 


11.4.1 常用 的 块 状元 素 


块 状 标签 顾名思义 ， 就 是 以 块 的 方式 ( 即 矩 形 的 方式 ) 显示 的 标签 。 在 默认 情况 下 ， 块 状 标签 占据 
一 行 的 位 置 。 相 邻 的 两 个 块 状 标签 无 法 显示 在 同一 行 中 。 
块 状 标签 在 XHTML 文档 中 的 主要 用 途 是 作为 网 页 各 种 内 容 的 容器 标签 ， 为 这 些 内 容 规范 位 置 和 尺 















































;网 页 





寸 。 基 于 块 状 标签 的 用 途 
几 种 。 
1. div 











.人 们 又 将 块 状 标签 称 作 容 器 标签 或 布局 标签 .常见 的 块 状 标签 主要 包括 以 下 


div 作为 通用 块 状元 素 ， 在 标准 网 页 布局 中 是 最 常用 的 结构 化 元 素 。div 元 素 表示 文档 结构 块 ， 它 可 
以 把 文档 划分 为 多 个 有 意义 的 区 域 或 模块 。 因 此 , 使 用 div 可 以 实现 网 页 的 总 体 布局 , 并 且 是 网 页 总 体 布 





局 的 首选 元 素 。 


例如 ， 用 三 个 div 元 素 划分 了 三 大 块 














区 域 . 这 些 区 域 分 别 属 于 版 头 、 主 体 和 版 尾 。 然 后 ， 在 版 头 和 





主体 区 域 分 别 又 用 了 多 个 div 元 素 再 次 细 分 为 更 小 的 单元 区 域 ， 这 样 便 可 以 把 一 个 网 页 划分 为 多 个 功能 


模块 : 


<div><!--[ 版 头 区 域 ]--> 
<div><!--[Logo]--></div> 
<div><!--[ 导 航 ]--></div> 


</div> 


<div><!-- [主体 区 域 ] --> 
<div><!--[ 模 块 1] --></div> 
<div><!--[ 模 块 2]--></div> 


</div> 


<div> 


<!--[ 版 尾 区 域 ] --> 


</div> 


ul、 ol 和 i 





uL、ol 和 芋 元 素 用 来 实现 普通 的 项 目 列表 ， 它们 分 别 表示 无 顺序 列表 、 有 顺序 列表 和 列表 中 的 项 目 。 
但 在 通常 情况 下 , 结合 使 用 由 和 二 定义 无 序列 表 . 结合 使 用 ol 和 1i 定 义 有 序列 表 。 列 表 元 素 全 是 块 状元 
素 ， 其 中 的 下 元 素 显 示 为 列表 项 ， 即 display: list-item， 这 种 显示 样式 也 是 块 状 元 素 的 一 种 特殊 形式 。 

列表 元 素 能 够 实现 网 页 结构 化 列表 ， 对 于 常常 需要 排列 显示 的 导航 菜单 、 新 闻 信 息 、 标 题 列表 等 ， 





使 用 它们 具有 较为 明显 的 优势 。 


无 序列 表 : 


<ul> 
<1i> 项 目 </1i> 
<li> 项 目 </1i> 
<li> 项 目 </1i> 


</ul> 


效果 如 图 11-1 所 示 。 


有 序列 表 : 
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<ol> 

<l1i> 项 目 </1i> 
<li> 项 目 </1i> 
<1i> 项 目 </1i> 


</o1> 
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图 11-1 无 序列 表 图 11-2 有 序列 表 


3. dl. dt 和 dd 


dl、dt 和 dd 元 素 用 来 实现 定义 项 目 列表 。 定 义 项 目 列表 原本 是 为 了 呈现 术语 解释 而 专门 定义 的 一 组 
元 素 ， 术 语 项 格 显示 ， 术语 的 解释 缩 进 显示 ,这样 多 个 术语 排列 时 ， 显 得 规整 有 序 ， 但 后 来 被 扩展 应 用 








到 网 页 的 结构 布局 中 。 





和 表示 定义 列表 : dt 表示 定义 术语 ， 即 定义 列表 的 标题 ，dd 表示 对 术语 的 解释 ， 即 定义 列表 中 的 


项 目 : 


<dl> 
<dt> 标 题 列表 项 </dt> 
<dd> 标 题 说 明 </dd> 
<dt> 标 题 列表 项 </dt> 
<dd> 标 题 说 明 </dd> 


</dl> 
效果 如 图 11-3 所 示 。 
4.p 


网 页 中 的 文本 . 绝 大 多 数 都 是 以 段落 的 方式 显示 的 。 在 为 网 页 添加 段落 文本 时 . 





标签 <p>: 


<p> 关 于 “香港 ”地 名 的 由 来 ， 有 两 种 流传 较 广 的 说 法 。</p> 
<p> 说 法 一 : 香港 的 得 名 与 香料 有 关 。…… ， 被 人 们 称 为 “香港 "。</p> 
<p> 说 法 二 : ……， 也 就 开始 被 称 为 “香港 ”"。</p> 


效果 如 图 11-4 所 示 。 


即 可 使 用 段落 文本 
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有 标题 列表 页 
标题 说 明 








图 11-3 dl、dt 和 dd 元 素 图 11-4 p 标签 


段落 文本 标签 <p> 除 了 显示 段落 文本 外 .也 可 以 实现 类 似 <div> 标 签 的 功能 。 
5. h1、h2、h3、h4、h5、h6 

<h1> 到 <h6>6 个 标签 的 作用 是 作为 网 页 中 的 标题 内 容 ， 着 重 显示 这 些 文本 。 在 绝 大 多 数 网 页 浏览 器 
中 .都 预 置 了 这 6 个 标签 的 样式 ， 包 括 字号 以 及 字体 加 粗 等 。 使 用 CSS 样式 表 ， 可 以 方便 地 对 这 些 样式 
进行 重 定义 。 例 如 ， 使 用 <h2> 标 题 定义 一 首 古诗 : 





<div align="center"> 
<h2> 静 夜 思 </h2> 
<p> 床 前 明 月光 ， 
疑 是 地 上 霜 。 </p> 
<p> 举 头 望 明月 ， 
低头 思 故乡 。</p> 
</div> 


效果 如 图 11-5 所 示 。 





图 11-5 hl、h2、h3、h4、h5、h6 标签 


6. table、 tr 和 td 

table、tr 和 td 元 素 被 用 来 实现 表格 化 数据 显示 ， 它们 都 是 块 状元 素 。 

table 表示 表格 ， 它 主要 用 来 定义 数据 表格 的 包含 框 。 如 果 要 定义 数据 表 整 体 样式 应 该 选择 该 元 素来 
实现 ， 而 数据 表 中 数据 的 显示 样式 则 应 通过 td 元 素来 实现 。 

ff 表示 表格 中 的 一 行 ， 由 于 它 的 内 部 还 需要 包含 单元 格 . 所 以 在 定义 数据 表格 样式 上 ， 该 元 素 的 作 
用 并 不 太 明显 。 

td 表示 表格 中 的 一 个 方 格 。 该 元 素 作为 表格 中 最 小 的 容器 元 素 ， 可 以 放置 任何 数据 和 元 素 。 但 在 标 
准 布局 中 不 再 建议 用 td 放置 其 他 元 素来 实现 嵌 套 布局 ， 而 仅 作 为 数据 最 小 单元 格 来 使 用 : 














<table width="580"> 
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<tr> 
<td>gnbsp; </td> 
<td > 一 班 </td> 
<td > 二 班 </td> 
<td > 三 班 </td> 
<td > 四 班 </td> 
<td > 五 班 </td> 


<td > 评分 </td> 
<td >A</td> 
<td >C</td> 
<td >B</td> 
<td >E</td> 
<td >D</td> 














</tr> 
</table> 
效果 如 图 11-6 所 示 。 aT TTT FT .TR PTT i TTT TTT FT TT 
WE -得 | = 班 | = 班 | 四 班 | 于 班 
11.4.2 常见 的 内 联 元 素 
[ 评分 A C B E D 























内 联 标 签 通 常用 于 定义 “语义 级 ”的 网 页 内 容 ， 
! [ 旬 建 表格] 
其 特性 表现 为 没有 固定 的 形状 、 没 有 预 置 的 宽度 和 高 \EE 


度 等 。 














内 联 标签 通常 处 于 行内 布局 的 形式 . 相 邻 的 多 个 
内 联 标签 可 显示 于 同一 行内 。 常 用 的 内 联 标签 主要 包 网 和 风头 
括 以 下 几 种 。 
下 治 

<a> 标 签 的 作用 是 为 网 页 的 文本 、 图 像 等 媒体 内 容 添加 超级 链接 。 作 为 一 种 典型 的 内 联 标签 ，<a> 标 
签 没有 固定 的 形状 ， 也 没有 固定 的 大 小 。 在 行内 ，<a> 标 签 根据 内 容 扩展 尺寸 。 
2 二 

<br> 标 签 的 作用 是 为 网 页 的 内 容 添加 一 个 换行 元 素 . 
扩展 到 下 一 行 。 



































3. img 4 
img 元 素 用 于 表示 在 网 页 中 的 图 像 元 素 。 与 br 元 素 相 © S| 
同 , 在 HTML 中 .img 元 素 可 以 单独 使 用 。 但 在 XHTML A py 
中 ，img 元 素 必须 在 结尾 处 关闭 N 参 
= | 


<img alt=" 图 像 元 素 " src="image.jpg" /> 
图 11-7 img 元 素 
效果 如 图 11-7 所 示 。 
另外 . 在 XHTML 中 .所 有 的 img 元 素 必须 添加 alt 属性 .也 就 是 图 像 元 素 的 提示 信息 文本 。 
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4. span 
span 用 于 表示 范围 是 一 个 通用 内 联 元 素 。 该 元 素 可 以 作为 文本 或 内 联 元 素 的 容器 ,通常 为 文本 或 
者 内 联 元 素 定义 特殊 的 样式 、 辅 助 并 完善 排版 、 修 饰 特定 内 容 或 局 部 区 域 等 。 














<div> 
<span><!-- 设 置 字体 大 小 --> 
<span title=" 标 题 "> 带 标题 的 文本 </span> 
<span><strong> 加 粗 显 示 </strong> 
</span> 
<span><em> 斜 体 显示 </em></span> 
</span> 
</div> 


效果 如 图 11-8 所 示 。 
11.4.3 ”常见 的 可 变 元 素 


可 变 元 素 是 一 种 特殊 的 元 素 ， 在 某 些 情况 下 可 
以 是 块 状元 素 , 也 可 以 是 内 联 元 素 。 常 见 的 可 变 元 素 
有 以 下 几 种 。 
1. button 

在 网 页 中 ，button 元 素 主 要 用 于 定义 按钮 。 该 元 素 可 以 作为 容器 ， 人 允许 在 其 中 放置 文本 或 图 像 。 制 
作文 本 按钮 和 图 像 按 钮 的 方法 如 下 所 示 。 

文本 按钮 : 








图 11-8 span 























<button name="btn" type="submit"> 提交 </button> 


图 像 按钮 : 





<button name="btn" type="submit"> 
<img src="image.jpg" /></button> 








效果 如 图 11-9 所 示 。 | 
2. iframe | 有 区 

过 ame 元 素 在 网 页 中 用 于 创建 包含 另外 一 个 网 页 文档 的 内 联 aa 
框架 。 使 用 这 ame 标签 嵌入 必 应 搜索 引擎 : 

<iframe width="550" height="300" src 

="http://www.bing.com"></iframe> 


1.5 EC 


本 章 概 要 性 地 介绍 了 XHTML 标记 语言 . 为 本 书后 续 的 学 习 打 下 坚实 的 基础 。 本 章 主要 讲述 XHTML 
概述 、XHTML 基本 语法 、 元 素 分 类 、 常 用 元 素 . 其 中 包括 制作 吸引 人 的 网 站 的 一 些 方法 和 相关 技术 . 接 








图 11-9 button 元 素 
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下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进 行 实践 。 
11.5.1 制作 小 说 阅读 页 面 

在 Dreamweaver 软件 中 ,不 仅 可 以 通过 视图 界面 操作 .还 可 以 通过 编写 代码 制作 出 精美 的 网 页 。 编 
写 代码 使 用 XHTML 标记 语言 ， 该 标记 语言 具有 严格 的 语法 规则 。 本 练习 通过 编写 代码 制作 一 个 小 说 阅 
读 页 面 ， 主 要 练习 使 用 table、tr 和 td 标签 布局 ,添加 table 和 td 标签 的 属性 并 赋值 ， 段 落 标签 p 的 应 用 ， 
标题 标签 h3 和 h4 的 应 用 ， 超 链接 标签 a 的 应 用 .如 图 11-10 所 示 。 


小 说 在 线 图 读 网 





J 


才 说 相克 在 页 “二 条 灌区 新 人 > 天 刘 


第 1 各 。 有 障 抒 月 地 求人 






a 
的 人 从 半 放下 泊 信 人 












其中 芝 瓜 器 凶 ， 世 天 
人 和 和 
“下 量 他 。” 皇 由 宁 遂 ，“ 际 为 此 ， 可 请 玫 国 





时 -这 
面 采 方 尿 。 才 日 老 世 降 不 全 来 学 拓 玉 这 要 履 的 。 丙 本 
事 ， 便 道 ，“ 售 天 去 加 ， i ”A 


图 11-10 制作 小 说 阅读 页 面 
STEP|01 新 建 空 白文 档 ， 在 【属性 】 面 板 中 单 击 【页 面 属性 】 按 钮 ， 在 弹出 的 对 话 框 中 设置 页 面 字体 大 
小 、 文 本 颜色 、 背 景 ， 如 图 11-11 一 图 11-14 所 示 。 





















































mm edy -重生 当下 可 
[Eh cs | i 大 小 SG) 14 Lb EE 
文档 标题 小 说 在 二 SN 网 [i | 


图 11-11 【属性 】 面 板 














sm ea) 








而 而 字体 0); 趾 趴 认 字体 ” > > 
SS: 大 小 6): 14 “区 了 

Ei CE 

戎 果 白 0): | 9556 

前 信 图 各 0) WD). 
重复 品 ) - 

在 地 更 中 本 WD) 区 到 
be) 






































图 11-12 【页 面 属性 】〗 对 话 框 1 








:3 网 页 设计 与 网 站 建设 自学 经 典 :::: 


网 页 设计 与 网 站 建设 自学 经 典 














镑 接 Css) 
机 接 字体 0); 品 ( 同 页 面体) ~ ~ 


khe: 二 “El 


已 访问 妖 接 0) : 可 | ao37 活动 树 接 00: 大 | 460 
下 基线 样 式 0n : | 仅 在 交换 图 像 时 显示 下 划 线 
























































图 11-13 【页 面 属 性 〗】 对 话 框 2 





分 类 标题 /编码 





0 标题 0): 相 庆 在 区 现 辣 
ES) 文档 类 型 DTD): | XIWML 1.0 Transitional - 











编码 ED): [Wnicode QWTF-6) 了 ] [重新 载 入 R) 


tnicode 标准 化 表单 F): [C2( 蜗 区 分 角 。 后梁 规范 会 成) =] 


固 世 括 Unieode 签名 CO G) 


文件 文件 夹 : .… 与 网 站 建设 源 文件 \11\ 制 作 小 说 阅读 页 面 \ 
站 点 文件 夹 : 5: \Users\SY\Docunents\ 未 命名 站 点 2\ 











部 助 00 I 
图 11-14 【页 面 属性 〗 对 话 框 3 


STEP|02 切换 至 【代码 】 视 图 ， 将 光标 放置 在 <body></body> 之 间 ， 通 过 插入 <table>、<t> 和 <td> 标 签 
创建 一 个 7 行 x1 列 的 表格 ,如 图 11-15 所 示 。 












































于 和 | 吏 0n ps9 [外 天 一 x] caira | Ned 齐 | Chas 天 和 
car | | 5 


a SR 
5 











图 11-15 【属性 〗】 面 板 





STEP|03 然后 ， 在 <table> 标 签 中 添加 width、align、cellpadding 和 cellspacing 属性 并 设置 相应 的 值 ， 如 
图 11-16 所 示 。 
<table width="856" align="center" cellpadding="4" cellspacing="0" > 


图 11-16 CSS 样式 代码 
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STEP|04 将 光标 放置 在 第 1 行 单元 格 <td></td> 之 间 ， 输入 文字 “在 线 小 说 阅读 网 ”并 使 用 <h3></h3> 标 





题 标签 ,如 图 











11-17 所 示 。 
td><h3> 小 说 在 线 阅读 网 </h3></td 


图 11-17 CSS 样式 代码 


STEP|05 然后 .将 光标 放置 在 第 2 行 单元 格 <td> 标 签 中 ,添加 height 和 bgcolor 属性 并 设置 相应 的 值 ， 
以 设置 该 单元 格 的 高 度 和 背景 颜色 .如 图 11-18 所 示 。 


height="35" bgcolor="#ECECEA" 


图 11-18 CSS 样式 代码 


STEP|06 将 光标 放置 在 第 3 行 单元 格 <td></td> 之 间 . 输入 导航 栏目 文本 . 为 每 个 文本 的 前 后 插入 超 链 接 
代码 “<a hre 仁 "#"></a>”。 然 后 ， 在 每 个 文本 前 插入 6 个 空格 符 “&nbsp; ， 使 各 个 栏目 之 间 有 空格 ， 如 


图 11-19 所 示 。 


<td> 


<a href="#"> 小 说 在 线 阅读 网 首页 </a> - <a href="#"> 古 典 小 说 </a>-&gt; <a href="#" > 蒋 岸 甬 人 </a> 


&gt; <a href="#"> 玉 娇 猴 </a></td> 


图 11-19 CSS 样式 代码 


STEP|07 使 用 同样 的 方法 ， 在 第 3 行 单元 格 中 输入 文本 ， 并 在 每 个 文本 的 前 后 插入 超 链接 代码 。 将 光标 
放置 在 第 4 行 单元 格 <td></td> 之 间 ， 输入 标题 “第 11 回 有 腾 那 背地 求人 ”并 使 用 <h4></h4> 标 题 标 签 。 
在 该 单元 格 <td> 标 签 中 添加 “align="center"””， 以 设置 该 单元 格 【 水 平 】 为 【居中 对 齐 】， 如 图 11-20 所 示 。 


<td align="center"><h4> 第 11 回 有 腾 那 背地 求人 </ha></td> 


图 11-20 CSS 样式 代码 


STEP|08 然后 , 将 光标 放置 在 第 5 行 单元 格 <td></td> 之 间 , 切换 至 【设计 ] 视图 . 粘贴 文本 。 切换 至 【 代 
码 】 视 图 ， 将 光标 放置 在 第 6 行 单元 格 <td></td> 标 签 之 间 ， 输入 文本 “(快捷 键 一 ) 上 一 页 回 目录 (快捷 
键 Enter) 下 一 页 (快捷 键 一 )”， 并 分 别 为 每 个 文本 插入 超 链接 代码 。 然 后 ， 将 光标 放置 在 该 单元 格 <td> 
标签 中 添加 align 属性 并 设置 值 为 center， 如 图 11-21 所 示 。 


<td ali 
<a 

















gn="center"><a href="#"> 《快捷 键 ~~) 上 一 页 </a> <a href="#"> 回 目录 (快捷 键 Enter) </a> 
href="#"> 下 一 页 (快捷 键 ~) </a></td> 


图 11-21 CSS 样式 代码 


STEP|09 将 光标 放置 在 第 7 行 单元 格 <td></td> 标 签 之 间 , 插入 标签 <lx>,， 在 该 单元 格 插入 一 条 分 割 线 。 
然后 , 输入 版 权 信 息 。 在 段落 开头 插入 标签 <p>. 段落 结尾 插入 段落 结束 标签 </p>. 在 <td> 标 签 中 添加 align 
属性 并 设置 值 为 center， 如 图 11-22 所 示 。 


京 TCP 证 | 





<td align="center"><hr /> 


<p> Copyright @ 2664-2669 小 说 在 线 阅读 网 版 权 所 有 ， 言 情 都 市 、 亲 幻 玄 各 等 小 说 在 线 阅读 和 博客 服务 
612345S </p> 
<p> 有 问题 计 联 系 管理 员 : 举报 电话 : 916-12345678 客服 电话 : 6919-12345678</p></td> 


图 11-22 CSS 样式 代码 
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11.5.2 ”制作 友情 链接 页 面 


友情 链接 一 般 是 以 列表 的 形式 直观 地 展现 在 互联 网 上 ， 它 可 以 提高 网 站 的 知名 度 、 增 加 网 站 的 访问 
量 。 有 的 列表 前 有 序号 ， 有 的 没有 序号 。 本 练习 将 使 用 Dreamweaver 软件 制作 一 个 有 序列 表 的 友情 链接 
页 面 ， 主 要 练习 添加 table 和 td 标签 的 属性 并 赋值 、 段 落 标签 p 的 应 用 、 用 ol 标签 定义 有 序列 表 、 用 
UL 标签 定义 无 序列 表 、img 标签 的 使 用 、a 标签 定义 超 链 接 ， 如 图 11-23 所 示 。 
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图 11-23 制作 友情 链接 页 面 





STEP|01 新 建 空白 文档 ,在 【属性 】 面 板 中 单 击 【 页 面 属性 】 按 钮 ， 在 弹出 的 【页 面 属性 】 对 话 框 中 设 
置 页 面 字体 大 小 、 文 本 颜色 、 超 链接 的 样式 和 标题 ， 如 图 11-24 一 图 11-27 所 示 。 








居住 
> HE 村 规 Wy body, ‘4 th ”| 字 洒 RD) 口 Mi 字 舍 ~ ~ 甘于 河 画 @ 
好 cs 其 有 RRL_] [SS Denier |] | 大 小 5) 2 -| 























二村 晰 后宫 坊 -友情 村 滴 丙 面 





图 11-24 【属性 】 面 板 


分 类 外 观 Css) 
| | 页 面 字 体 YF)， 晤 默认 字体 - - - 
从 SI | 大 小 @): 到 S| 
| 文本 着 色 加: 机 | #333 
开 果 颜色 9): 国 
背景 图 像 0) 济 虹 人， 
| 重 夏 加 ) = 
| 左边 中 中 Ps 右边 距 四 
| 上 边 距 O) Pie Ti 0): Ee 
| 
| Ca 








图 11-25 【页 面 属性 〗】 对 话 框 1 
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下 录 韩 式 0 - [ 仅 在 变换 图 像 时 显示 下 基 丢 


| 
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链接 (Css) 
树 接 字体 0); 器 〈 同 页 面 字体 ) ~ ~ - 
大 小 G): 14 ~ 7 
榜 接 颜色 0 : 村 | #833 变换 图 像 榜 接 ): 本 | hd1s22 
已 访问 颖 扩 0: 一 | 353。 活动 料 接 0; 可 | 000 




















图 11-26 


标题 /编码 














【页 面 属性 】 对 话 框 2 


标题 @): 精美 礼品 坊 -友情 镑 接 页 面 





文档 类 型 0TD) 


ZXHITIWL 1.0 Transitional 








编码 G): 
Vnicode 标准 化 表单 9): 

















文件 文件 夹 : ，… 与 网 站 建设 源 文件 \11\ 制 作 友情 链接 页 面 \ 
站 点 文件 夹 ; C;\Users\ST\Docunents\ 未 命名 站 点 2\ 

















图 11-27 【页 面 属性 〗 对 话 框 3 


STEP|02 切换 至 【代码 】 视 图 ， 将 光标 放置 在 <body></body> 之 间 ， 通 过 插入 <table>、<tr> 和 <td> 标 签 
创建 一 个 5 行 x2 列 的 表格 。 然 后 ， 在 <table> 标 签 中 添加 width、align、cellpadding 和 cellspacing 属性 并 
设置 相应 的 值 ， 如 图 11-28 和 图 11-29 所 示 。 


























se es 下 calpaan ie | 居中 对 齐 ”| Dass 无 
”| | 
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图 11-28 创建 表格 
<table width="843" cellspacing="2" ceLLpadding="6" align="center"> 


图 11-29 CSS 样式 代码 








自 


设计 与 





STEP|03 <!-- cellspacing="2" 定 义 表 格 中 各 个 单元 格 之 间 的 间距 为 2。cellpadding="0" 定 义 单元 格 的 内 间 
距 。align="center" 定 义 表格 水 平 对 齐 方式 为 居中 。--> 











ELS> 
<td></td><!--—--> 
<td></td> 

</tr> 

<tr> 
<td></td> 
<td></td> 

</tr> 

<tr> 
<td></td> 
<td></td> 

</tr> 

SR 
<td></td> 
<td></td> 

</tr> 

A 
<td></td> 
<td></td> 

</tr> 

</table> 


STEP|04 将 光标 放置 在 第 1 行 第 1 列 单元 格 <td></td> 标 签 之 间 ， 分别 插入 两 个 <img> 标 签 并 设置 图 像 的 
高 和 宽 ， 如 图 11-30 所 示 。 














<td ><img src="logo.jpg" width="248" height="52" /><img src="tel.jpg" width="133" height="52" /></td> 


图 11-30 CSS 样式 代码 





STEP|05 在 第 1 行 第 2 列 单元 格 <td> 标 签 中 添加 width 属性 及 值 ， 在 <td></td> 标 签 之 间 插 入 <input> 和 
<button> 标 签 并 在 标签 中 添加 属性 及 值 。 然 后 .输入 文本 并 在 每 个 文本 的 前 后 插入 超 链接 代码 “<a 
hre 伍 "#"></a>”， 如 图 11-31 和 图 11-32 所 示 。 




















<img src="tel.jpg" width="133" height="52" /></td> 
图 11-31 CSS 样式 代码 


<td width="479"><input type="text" width="139"/> 
<button name="btn" type="submit"> 搜 索 </button> 
<strong> 高 级 搜索 : </strong><a href="#"> 饰 品 </a> <a href="#"> 鲜 蓄 </a> 
<a href="#"> 生 日 礼物 </a> <a href="#"> 结 婚礼 物 </a></td> 


图 11-32 CSS 样式 代码 
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STEP|06 将 光标 放置 在 第 2 行 第 1 列 单元 格 <td> 标 签 中 .添加 colspan 属性 及 值 ， 并 删除 第 2 行 第 2 列 
<td></td> 标 签 ， 以 及 合并 第 3 行 单元 格 .如 图 11-33 所 示 。 
<td colspan="2"><table width="856" align="center" cellpadding="2" cellspacing="@"> 


图 11-33 CSS 样式 代码 


STEP|07 然后 ， 在 <td></td> 标 签 之 间 ， 通 过 插入 <table>、<tr> 和 <td> 标 签 创建 一 个 1 行 x 10 列 的 表格 ， 
在 每 个 单元 格 中 插入 <img> 标 签 ， 设 置 图 像 属 性 ， 如 图 11-34 和 图 11-35 所 示 。 












Ca 和 Lin| 居 中 对 齐 ~ 


SSpace 0 Border 











图 11-34 制作 友情 链接 页 面 


<tr> 
<td><img src="1.j 





width="75" height="25"/></td> 
<td><img src="2.j width="75" height="25"/></td> 
<td><img src="3.jpg" width="75" height="25"/></td> 
<td><img src="4.jpg" width="75" height="25"/></td> 
<td><img src="5.jpg" width="75" height="25"/></td> 
<td><img src="6.jpg" width="75" height="25"/></td> 
<td><img src="7.jpg" width="75" height="25"/></td> 
<td><img src="8.jpg" width="75" height="25"/></td> 
<td><img src="9.jpg" width="75" height="25"/></td> 
<td><img src="19.jpg" width="75" height="25"/></td> 

</tr> 






图 11-35 CSS 样式 代码 


STEP|08 使 用 同样 的 方法 ,合并 第 3 行 单元 格 .在 合并 后 的 单元 格 中 插入 标签 创建 一 个 1 行 x2 列 的 表 
格 ， 如 图 11-36 和 图 11-37 所 示 。 


<td colspan="2"><table width="856"” ceLLpadding="6"” ceLLspacing="2"> 


图 11-36 CSS 样式 代码 


























ES 全 行 四 让 殉 四 5 |@ 素 ~] callirsdo | Nie[BA | Css 无 - 已 
一 ~ cuaz se Ra | 

加 em 

5 





图 11-37 创建 表格 


STEP|09 在 第 1 行 第 1 列 单元 格 <td> 标 签 中 ,添加 width、height 和 background 的 属性 及 相应 的 值 ， 并 
通过 插入 <ul> 和 <li> 标 签 创建 一 个 无 序列 表 . 如 图 11-38 所 示 。 

STEP|10 使 用 同样 的 方法 .在 第 1 行 第 2 列 单元 格 通过 插入 <ol> 和 <li> 标 签 创建 一 个 有 序列 表 . 如 图 11-39 
所 示 。 
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<td width="266"” height="266"” background=" 名 人 .jpg"><br /> 





<br /> 
<uUD 
<Li><a > 父亲 节 礼 物 推荐 </a></Ui> 
<Li><a > 父亲 节 适 合 送 什么 礼物 </a></Li> 
<Li><a >69 年 父亲 节 </a></Li> 
<Li><a > 父亲 节 鲜 花 </a></Li> 
<Li><a 送 女 领导 礼物 </a></Li> 
<Li><a > 送 上 司 什么 礼物 </a></Li> 
<Li><a > 给 领导 送 什么 礼 </a></Li> 
</uUD</jtd> 
图 11-38 无 序列 表 
链接 要 求 及 说 明 : </ha> 


<ol> 
“<11> 请 特 本 站 的 Logo 图 片 或 者 文 字 涟 接 放 到 烛 网 站 首页 。 
(文字 链接 换文 字 连 接 ， 图 片 连接 换 图 片 连接 》。</1i> 
<l1> 申请 网 站 必须 内 容 合法 健康 、 充 实 、 无 作 稳 、 页 面 美观 。 


<Li> 请 将 链接 放 在 费 站 相关 页 面 内 。</11> 

<Li> 首页 要 求 ，PR 信 大 于 等 于 5, 独立 IP 大 于 等 于 2 万 。</Ui> 
<Li> 内 页 要 求 ，PR 值 大 于 等 于 4, 独立 IP 大 于 等 于 1 万 。</ i> 
<1i> 其 他 合作 形式 请 发 邮件 : 123456@163.com® </Ui> 


</oL</td 


</Ui> 


图 11-39 有 序列 表 
STEP|11 将 光标 放置 在 第 4 行 第 1 列 单元 格 <td> 标 签 中 .添加 该 单元 格 height、 
性 及 值 ， 并 删除 第 4 行 第 2 列 单元 格 . 如 图 11-40 所 示 。 


<td height="424" colspan="2" background="bg.jpg"><br /> 
<br /> 





图 11-40 CSS 样式 代码 


colspan 和 background 属 


STEP|12 然后 . 在 <td></td> 标 签 之 间 插入 一 个 有 序列 表 . 输入 友情 链接 文本 并 在 每 个 文本 的 前 后 插入 超 


链接 代码 “<a hre 伍 "#"></a>” ， 如 图 11-41 所 示 。 





<1Li> 合 作 伙伴 : 
</hs> 
<a href 百度 </a> 
&nbspj&nbspji&nb: spj&nbspi&nbspi&nbspi&nbspj&nbspi <a href= 
网 


nbsp; nbsp; tinbsp; énbsp; nbsp; énbsp; inbsp; énbsp;énbsp; <a href="#" 
> 搜狐 </a>&nbsp; enbsp; nbsp; snbsp; snbsp; énbsp;énbsp;énbsp;é&nbsp; <a 
href="#"> 网 易 </a> 
nbsp;&nbsp; tnbsp;énbsp;&nbsp; énbsp; énbsp; nbsp; énbsp; <a href="#" 
> 新 浪 网 </a>&nbsp;&nbsp;snbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2nbsp; 
<a href="g"> 徐 虎 网 </a> snbsp;snbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="g"> 驱 动 之 家 </a> 

</U> 

<h5> 





图 11-41 CSS 样式 代码 





第 12 章 


设计 网 页 元 素 样式 


为 网 页 元 素 设计 样式 . 可 以 使 网 页 更 加 美观 。 在 设计 网 页 元 素 样式 时 . 就 需要 使 用 到 CSS 技术 。CSS 
技术 为 网 页 提供 了 一 种 新 的 设计 方式 ， 通 过 简洁 、 标 准 化 和 规范 性 的 代码 ,提供 了 丰富 的 表现 形式 。 目 
前 编写 CSS 代码 最 便捷 的 工具 就 是 Dreamweaver。 其 提供 了 大 量 可 视 化 的 编辑 工具 ， 以 及 详细 的 代码 提 
示 功 能 和 规范 化 验证 功能 。 

本 章 主要 介绍 CSS 概述 、CSS 样式 分 类 、CSS 基本 语法 、CSS 选择 器 、CSS 选择 方法 、 使 用 CSS 样 
式 表 、 编 辑 CSS 规则 和 综合 实战 。 通 过 本 章 的 学 习 我 们 可 以 知道 . 在 网 站 建设 中 如 何 设计 网 页 元 素 样式 . 
以 及 如 何在 Dreamweaver 中 进行 简单 的 页 面 布局 。 
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CSS 概述 





CSS (Cascading Style Sheets， 层 倒 样 式 表 ) 是 一 种 标准 化 的 网 页 语言 , 其 作用 是 为 HIML、XHTML 
以 及 XML 等 标记 语言 提供 样式 描述 。 
当 网 页 浏览 器 读 取 HTML、XHTML 或 XML 文档 并 加 载 这 些 文档 的 CSS 时 ， 可 以 将 描述 的 样式 显 


示 出 来 。 
CSS 不 需要 编译 ， 可 直接 通过 网 页 浏览 器 执行 。 由 CSS 文件 控制 样式 的 网 页 ， 仅 仅 需 要 修改 CSS 
文件 即 可 改变 网 页 的 样式 。 


使 用 CSS 定义 网 页 的 样式 ， 可 以 大 为 降低 网 页 设计 者 的 工作 量 ， 提 高 网 页 设计 的 效率 。 
例如 ， 在 传统 HTML 网 页 文档 中 制作 一 个 红色 的 粗 体 斜 体 文本 ， 需 要 使 用 font 标签 、b 标签 以 及 i 
标签 等 ， 同 时 还 需要 调用 font 标签 的 color 属性 ， 代 码 如 下 : 





<font color=red><b><i> 红 色 粗 体 斜 体 文本 </i></b></font> 





在 某 个 网 页 中 ， 如 有 100 个 这 样 的 红色 粗 体 斜 体 文本 ， 那 么 用 户 需要 为 这 100 个 红色 粗 体 斜 体 文本 
都 添加 这 样 的 标签 代码 如 下 : 

<font color=red><b><i> 红 色 粗 体 斜体 文本 </i></b></font> 

<font color=red><b><i> 红 色 粗 体 斜体 文本 </i></b></font> 


3 ss 
<font color=red><b><i> 红 色 粗 体 斜 体 文本 </i></b></font> 








如 果 用 户 需要 修改 这 100 个 红色 粗 体 斜体 文本 为 蓝 色 ， 则 需要 再 修改 这 个 标签 100 次 ,效率 十 分 低 
下 。 在 标准 化 的 XHTML 文档 中 ， 可 以 通过 span 标签 将 文本 放 在 一 个 虚拟 的 容器 中 ,然后 使 用 CSS 技术 
设计 一 个 统一 的 样式 ,并 通过 span 标签 的 class 属性 将 样式 应 用 到 span 标签 所 襄 括 的 文本 中 。 代 码 如 下 : 

















<style type="text/css"> 
Ld 
.styles{ 
color:#f£00; 
font-weight:bold; 
font-style:italic; 
} 
一 -> 
</style> 
<span class="styles"> 红 色 粗 体 斜 体 文本 </span> 


虽然 使 用 CSS+XHTML 需要 比 HIML 多 写 许多 代码 .但 是 假如 网 页 中 有 100 个 这 样 的 文本 ,那么 
每 个 这 样 的 文本 都 只 需要 通过 class 属性 即 可 应 用 该 样式 。 如 果 用 户 需 要 修改 这 100 个 红色 粗 体 斜 体 的 文 
本 , 则 只 需要 修改 style 标签 中 的 CSS 样式 即 可 .无 须 再 去 修改 XHTML 中 的 语句 。 这 就 是 结构 与 表现 分 
离 的 优点 。 
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了 2.2 | CSS 样式 分 类 


CSS 代码 在 网 页 中 主要 有 三 种 存在 的 方式 , 即 外 部 CSS、 内 部 CSS 和 内 联 CSS。 本 节 主 要 讲述 CSS 
样式 分 类 ， 其 中 包括 外 部 CSS、 内 部 CSS、 内 联 CSS。 用 户 通过 对 本 节 的 学 习 ， 可 以 了 解 CSS 样式 有 几 
种 分 类 、 都 是 哪些 内 容 ， 为 后 面 的 几 章 内 容 奠定 基础 。 


12.2.1 外 部 CSS 


外 部 CSS 是 一 种 独立 的 CSS 样式 . 其 一 般 将 CSS 代码 存放 在 一 个 独立 的 文本 文件 中 , 扩展 名 为 .css。 
这 种 外 部 的 CSS 文件 与 网 页 文档 并 没有 什么 直接 的 关系 。 如 果 需 要 通过 这 些 文件 控制 网 页 文档 ， 则 需要 
在 网 页 文档 中 使 用 link 标签 导入 。 例 如 .使 用 CSS 文档 来 定义 一 个 网 页 的 大 小 和 边 距 的 代码 如 下 : 























@charset "gb2312"; 

/* CSS Document */ 

body{ 
width:1003px; 
margin:0Opx; 
padding:0px; 

} 


将 CSS 代码 保存 为 文件 后 ， 即 可 通过 link 标签 将 其 导入 到 网 页 文档 中 。 例如，CSS 代码 的 文件 名 为 
“main.css” ， 代 码 如 下 : 











<!DOCTYPE html PUBLIC "-//W3C//DTD 
XHTML 1.0 Transitional//EN" "http: 
//www.w3.0rg/TR/xhtml1/DTD/xhtml 1-transitional.dtd"> 
<html xmlns="http://www.w3.oFg/ 

1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" 
content="text/html; charset= 

gb2312" /> 

<title> 导 入 CSS 文档 </title> 

<link href="main.css" rel= 

"stylesheet" type="text/css" /> 

<!-- 导 入 名 为 main.-css 的 CSS 文档 --> 

</head> 

<body> 

</body> 

</html> 


12.2.2 内 部 CSS 


内 部 CSS 是 位 于 XHTML 文档 内 部 的 CSS。 使 用 内 部 CSS 的 好 处 在 于 可 以 将 整个 页 面 中 所 有 的 CSS 











样式 集中 管理 ， 以 选择 器 为 接口 供 网 页 浏览 器 调用 。 例 如 .使 用 内 部 CSS 定义 网 页 的 宽度 以 及 超 链接 的 
下 划 线 等 的 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: 
//www-.w3.o0rg/TR/xhtml1/DTD/xhtml 1-transitional.dtd"> 
<html xmlns="http://www.w3.org/ 
1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type™" 
content="text/html; charset= 
gb2312" /> 
<title> 测 试 网 页 文档 </title> 
<!-- 开 始 定义 CSS 文档 --> 
<style type="text/css"> 
<!-- 
body { 
width:1003px; 
} 
a 
text-decoration:none; 
} 


--> 


</style> 

<!-- 内 部 CSS 完成 --> 
</head> 
i = 


12.2.3 内 联 CSS 


内 联 CSS 是 利用 XHTML 标签 的 style 属性 设置 的 CSS 样式 .又 称 谋 入 式样 式 ,内 联 式 CSS 与 HIML 
的 描述 性 标签 一 样 ， 只 能 定义 某 一 个 网 页 元 素 的 样式 .是 一 种 过 渡 型 的 CSS 使 用 方法 .在 XHTML 中 并 
不 推荐 使 用 。 内 部 样式 不 需要 使 用 选择 器 。 例 如 ， 使 用 内 联 式 CSS 设置 一 个 表格 的 宽度 : 





























<table style="width:100px;"> 
<tr> 
<td> 宽 度 为 100px 的 表格 </td> 
</tr> 
</table> 
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作为 一 种 网 页 的 标准 化 语言 ,CSS 有 着 严格 的 书写 规范 和 格式 。 本 节 主要 讲述 了 4 个 方面 的 内 容 . 
其 中 包括 基本 构成 、 书 写 规范 、 注 释 、 文 档 的 声明 。 用 户 通 过 对 本 节 的 学 习 ， 可 以 了 解 CSS 有 几 种 基本 
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语法 、 都 是 哪些 内 容 ， 为 后 面 的 几 章 内 容 商定 基础 。 
12.3.1 基本 构成 
一 条 完整 的 CSS 样式 语句 包括 以 下 几 个 部 分 : 


selectort{ 
property:value 


| 

在 上 面 的 代码 中 ， 各 关键 词 的 含义 如 下 所 示 。 

selector (选择 器 ) : 其 作用 是 为 网 页 中 的 标签 提供 一 个 标识 ， 以 供 其 调用 。 

property (属性 ) : 其 作用 是 定义 网 页 标签 样式 的 具体 类 型 。 

value (属性 值 ): 属性 值 是 属性 所 接受 的 具体 参数 。 

在 任意 一 条 CSS 代码 中 .通常 都 需要 包括 选择 器 . 属性 以 及 属性 值 这 三 个 关键 词 (内 联 式 CSS 除外 )。 


12.3.2 书写 规范 
虽然 杂乱 的 代码 同样 可 被 浏览 器 判读 ,但 是 书写 简洁 、 规 范 的 CSS 代码 可 以 给 修改 和 编辑 网 页 带 来 





1. 单位 的 使 用 

在 CSS 中 . 如 果 属性 值 是 一 个 数字 , 那么 用 户 必须 为 这 个 数字 安排 一 个 具体 的 单位 。 除 非 该 数字 是 
由 百分比 组 成 的 比例 .或 者 数字 为 0。 例 如 .分 别 定义 两 个 层 . 其 中 第 1 个 层 为 父 容器 .以 数字 属性 值 为 
宽度 ， 而 第 2 个 层 为 子 容器 ， 以 百分比 为 宽度 ， 代 码 如 下 : 





#parentContainert{ 
width:1003px 

} 

#childrenContainer{ 
width:50% 

} 


2. 引号 的 使 用 
多 数 CSS 的 属性 值 都 是 数字 值 或 预先 定义 好 的 关键 字 。 然 而 , 有 一 些 属性 值 则 是 含有 特殊 意义 的 字 








符 串 。 这 时 ， 引 用 这 样 的 属性 值 就 需要 为 其 添加 引号 。 典 型 的 字符 串 属性 值 就 是 各 种 字体 的 名 称 ， 举 例 
如 下 : 
span{ 
font-family: "微软 雅 黑 " 
} 
3. 多 重 属 性 


如 果 在 这 条 CSS 代码 中 有 多 个 属性 并 存 ， 则 每 个 属性 之 间 需 要 以 分 号 “;” 隔 开 . 例如 : 





.content{ 
color:#999999; 
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font-family:" 新 宋体 "; 
font-size:14px; 


} 


4. 大 小 写 敏感 和 空格 

CSS 与 VBScript 不 同 ， 对 大 小 写 十 分 敏感 。mainText 和 MainText 在 CSS 中 是 两 个 完全 不 同 的 选择 
器 。 除 了 一 些 字符 串 式 的 属性 值 (例如 英文 字体 MS Serf 等 ) 以 外 .CSS 中 的 属性 和 属性 值 必须 小 写 。 
为 了 便于 判读 和 纠 错 ， 建议 在 编写 CSS 代码 时 在 每 个 属性 值 之 前 添加 一 个 空格 。 这 样 ， 如 果菜 条 CSS 属 
性 有 多 个 属性 值 ， 则 阅读 代码 的 用 户 可 方便 地 将 其 区 分 开 。 


12.3.3 ”注释 


与 多 数 编程 语言 类 似 , 用 户 也 可 以 为 CSS 代码 进行 注释 . 但 与 同样 用 于 网 页 的 XHTML 语言 注释 方 
式 有 所 区 别 。 在 CSS 中 ,注释 以 斜 枉 “/” 和 星 号 “* ”开头 ， 以 星 号 “* ”和 和 斜 枉 “/” 结 尾 ， 例 如 






































.text{ 
font-family: "微软 雅 黑 "; 
font-size:12px; 
/*color:#ffcc00;*/ 

} 


12.3.4 文档 的 声明 


在 外 部 CSS 文件 中 ,通常 需要 在 文件 的 头 部 创建 CSS 的 文档 声明 ， 以 定义 CSS 文档 的 一 些 基本 属 
性 。 常 用 的 文档 声明 包括 6 种 ， 如 表 12-1 所 示 。 


表 12-1 常用 的 文档 声明 


导入 外 部 CSS 文件 
定义 当前 CSS 文件 的 字符 集 
@font-face 定义 嵌入 XHTML 文档 的 字体 


@fontdef 定义 嵌入 的 字体 定义 文件 
定义 页 面 的 版 式 
定义 设备 类 型 





在 多 数 CSS 文档 中 ， 都 会 使 用 “@charset” 声 明文 档 所 使 用 的 字符 集 。 除 “@charset” 声 明 以 外 ， 
其 他 的 声明 多 数 可 使 用 CSS 样式 来 替代。 


CSS 选择 器 











选择 器 是 CSS 代码 的 对 外 接口 ， 网 页 浏览 嚣 就 是 根据 CSS 代码 的 选择 器 来 实现 和 XHTML 代码 的 
匹配 。 然 后 读 取 CSS 代码 的 属性 、 属 性 值 . 将 其 应 用 到 网 页 文档 中 。 本 节 主 要 讲述 在 CSS 的 语法 规则 中 
主要 包括 的 5 种 选择 器 ， 即 标签 选择 器 、 类 选择 器 、ID 选择 器 、 伪 类 选择 器 、 伪 对 象 选择 器 。 用 户 通 过 











第 12 章 设计 网 页 元 素 样式 





对 本 节 的 学 习 ， 可 以 了 解 CSS 有 几 种 基本 语法 、 都 是 哪些 内 容 ， 为 后 面 的 几 章 内 容 疯 定 基础 。 
12.4.1 标签 选择 器 


CSS 的 选择 器 名 称 只 允许 包括 字母 、 数 字 以 及 下 画 线 ,其 中 ,不 允许 将 数字 放 在 选择 器 的 第 1 位 ， 
也 不 允许 选择 器 名 称 与 XHTML 标签 重复 ， 以 免 出 现 混乱 。 在 CSS 的 语法 规则 中 主要 包括 5 种 选择 器 ， 
即 标签 选择 器 、 类 选择 器 、ID 选择 器 、 伪 类 选择 器 、 伪 对 象 选择 器 。 

在 XHTML 1.0 中 , 共 包括 94 种 基本 标签 。CSS 提供 了 标签 选择 器 , 允许 用 户 直接 定义 多 数 XHTML 
标签 的 样式 。 例 如 .定义 网 页 中 所 有 无 序列 表 的 符号 为 空 ， 可 直接 使 用 项 目 列表 的 标签 选择 器 ol: 











olf 
list-style:none; 


} 
12.4.2 ”类 选择 器 


在 使 用 CSS 定义 网 页 样式 时 .经常 需要 对 某 一 些 不 同 的 标签 进行 定义 ,使 之 呈现 相同 的 样式 。 在 实 
现 这 种 功能 时 就 需要 使 用 类 选择 器 。 

类 选择 器 可 以 把 不 同类 型 的 网 页 标签 归 为 一 类 ， 为 其 定义 相同 的 样式 . 简化 CSS 代码 。 在 使 用 类 选 
择 器 时 , 需要 在 类 选择 器 的 名 称 前 加 类 符号 “.“。 而 在 调用 类 的 样式 时 , 则 需要 为 XHTML 标签 添加 class 
属性 ， 并 将 类 选择 器 的 名 称 作为 class 属性 的 值 。 
例如 , 网 页 文档 中 有 三 个 不 同 的 标签 . 一 个 是 层 (div) . 一 个 是 段落 (p). 还 有 一 个 是 无 序列 表 (ul) 。 
如 果 使 用 标签 选择 器 为 这 三 个 标签 定义 样式 ， 使 其 中 的 文本 变 为 红色 ， 需 要 编写 三 条 CSS 代码 : 


div{/* 定 义 网 页 文档 中 所 有 层 的 样式 */ 
color: #ff00007 

} 

Pp{/* 定 义 网 页 文档 中 所 有 段落 的 样式 */ 
color: #ff00007 

上 

ul{/* 定 义 网 页 文档 中 所 有 无 序列 表 的 样式 */ 
color: #ff00007 

} 

















使 用 类 选择 器 ， 则 可 将 以 上 三 条 CSS 代码 合并 为 一 条 : 
.redText{ 


color: #ff0000; 


然后 ， 即 可 为 div、p 和 也 等 标签 添加 class 属性 .应 用 类 选择 器 的 样式 : 


<div class="redText"> 红 色 文 本 
</div> 
<p class="redText"> 红 色 文 本 </div> 


<ul class="redText"> 
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<1i> 红 色 文本 </1i> 
</u1> 


一 个 类 选择 器 可 以 对 应 文档 中 的 多 种 标签 或 多 个 标签 . 体现 了 CSS 代码 的 可 重用 性 。 其 余 标 签 选择 
器 都 有 其 各 自 的 用 途 。 


12.4.3 ID 选择 器 


了 D 选择 器 也 是 一 种 CSS 的 选择 器 。 之 前 介绍 的 标签 选择 器 和 类 选择 器 都 是 一 种 范围 性 的 选择 器 , 可 
设 定 多 个 标签 的 CSS 样式。 而 ID 选择 器 则 是 只 针对 某 一 个 标签 的 ， 唯 一 性 的 选择 器 

在 XHTML 文档 中 ， 人 允许 用 户 为 任意 一 个 标签 设 定 了 DP， 并 通过 该 ID 定义 CSS 样式 但 是 . 不 允许 
两 个 标签 使 用 相同 的 人 D。 使 用 ID 选择 器 . 用 户 可 更 加 精密 地 控制 网 页 文档 的 样式 。 在 创建 ID 选择 器 时 . 
需要 为 选择 器 名 称 使 用 外 符号 “# 。 在 为 XHTML 标签 调用 外 选择 器 时 .需要 使 用 其 id 属性 。 例 如. 
通过 ID 选择 器 ， 分别 定 义 某 个 无 序列 表 中 三 个 列表 项 的 样式 ， 代 码 如 下 : 


#1istLeft1{ 
float:left; 

} 

#1istMiddle{ 
float: inherit; 

} 

#1istRight{ 
float:right; 

} 





然后 ， 即 可 使 用 标签 的 id 属性 . 应 用 三 个 列表 项 的 样式 : 
<ul> 

<1i id="1istLeft"> 左 侧 列表 </1i> 

<1i id="1istMiddle"> 中 部 列表 

</1i> 

<1i id="listRight"> 右 侧 列表 </1i> 
</ul> 


12.4.4” 伪 类 选择 器 


之 前 介绍 的 三 种 选择 器 都 是 直接 应 用 于 网 页 标签 的 选择 器 。 除 了 这 些 选择 器 外 . CSS 还 有 另 一 类 选 
择 器 ， 即 伪 选 择 嚣 。 

与 普通 的 选择 器 不 同 , 伪 选 择 器 通常 不 能 应 用 于 某 个 可 见 的 标签 . 只 能 应 用 于 一 些 特殊 标签 的 状态 。 
其 中 ,最 常见 的 伪 选 择 器 就 是 伪 类 选择 器 。 在 定义 伪 类 选择 器 之 前 ， 必 须 首 先 声明 定义 的 是 哪 一 类 网 页 
元 素 , 将 这 类 网 页 元 素 的 选择 器 写 在 伪 类 选择 嚣 之前， 中 间 用 冒号 “:” 隔 开 . 例如 : 



































selector:pseudo-class {property: value} 


/* 选 择 器 : 擅 类 {属性 : 属性 值 ; }*/ 


CSS2.1 标准 中 共 包 括 7 种 伪 类 选择 器 。 在 正 浏览 器 中 .可 使 用 其 中 的 4 种 .如 表 12-2 所 示 。 
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表 12-2 IE 浏览 器 可 使 用 的 伪 类 选择 器 










未 被 访问 过 的 超 链接 
鼠标 滑 过 超 链接 
被 激活 的 超 链接 
已 被 访问 过 的 超 链 接 













例如 ， 要 去 除 网 页 中 所 有 超 链接 在 默认 状态 下 的 下 画 线 ， 就 需要 使 用 到 伪 类 选择 器 : 


a:link { 

/* 定 义 超 链接 文本 的 样式 */ 
text-decoration: none; 
/* 去 除 文本 下 画 线 */ 

} 


12.4.5 ” 伪 对 象 选择 器 


伪 对 象 选择 器 也 是 一 种 伪 选 择 器 ， 其 主要 作用 是 为 某 些 特定 的 选择 器 添加 效果 。 在 CSS 2.1 标准 中 
共 包 括 4 种 伪 对 象 选择 器 , 在 正 5.0 及 之 后 的 版 本 中 支持 其 中 的 两 种 。 


表 12-3 IE5.0 之 后 支持 的 伪 对 象 选择 器 













:first-letter 定义 选择 器 所 控制 的 文本 第 一 个 字 或 字母 
:first-line 定义 选择 器 所 控制 的 文本 第 一 行 


伪 对 象 选择 器 的 使 用 方式 与 伪 类 选择 器 类 似 ， 都 需要 先 声明 定义 的 是 哪 一 类 网 页 元 素 ， 将 这 类 网 页 











元 素 的 选择 器 写 在 伪 类 选择 器 之 前 . 中 间 用 冒号 “: 隔 开 。 例如 . 定义 某 一 个 段落 文本 中 第 1 个 字 为 2em , 
即 可 使 用 伪 对 象 选 择 器 : 























Pi 
font-size: 12px; 
} 
p:first-lettert{ 
font-size: 2em; 


} 


Ucss 扩 法 | 


选择 方法 是 使 用 选择 器 的 方法 。 通 过 选择 方法 . 用户 可 以 对 各 种 网 页 标签 进行 复杂 的 选择 操作 ， 提 
高 CSS 代码 的 效率 。 在 CSS 语法 中 允许 用 户 使 用 的 选择 方法 有 10 多 种 .其 中 常用 的 主要 包括 三 种 ， 即 
包含 选择 、 分 组 选择 和 通用 选择 。 本 节 主 要 讲述 在 CSS 选择 方法 中 主要 包括 的 这 三 种 选择 方法 。 用 户 通 
过 对 本 节 的 学 习 . 可 以 了 解 CSS 有 几 种 选择 方法 、 都 是 哪些 内 容 . 为 后 面 的 几 章 内 容 芮 定 基础 。 
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;网 页 设计 


12.5.1 包含 选择 


包含 选择 是 一 种 被 广泛 应 用 于 Web 标准 化 网 页 中 的 选择 方法 . 其 通常 应 用 于 定义 各 种 多 层 焦 套 网 页 
元 素 标签 的 样式 .可 根据 网 页 元 素 标签 的 谋 套 关系 .帮助 浏览 器 精确 地 查找 该 元 素 的 位 置 。 

在 使 用 包含 选择 方法 时 . 需要 将 具有 包含 选择 关系 的 各 种 标签 按照 指定 的 顺序 写 在 选择 器 中 , 同时 ， 
用 空格 将 这 些 选择 器 分 开 。 例 如， 在 网 页 中 .有 三 个 标签 的 赃 套 关系 如 下 所 示 : 























<tagNamel> 
<tagName2> 
<tagName3>innerText.</tagName3> 
</tagName2> 
</tagNamel> 
<tagName3>outerText</tagName3> 


在 上 面 的 代码 中 .tagNamel .tagName2 以 及 tagName3 表示 三 种 各 不 相同 的 网 页 标签 ,其 中 ,tagName3 
标签 在 网 页 中 出 现 两 次 。 如 果 直 接 通过 tagName3 的 标签 选择 器 定义 innerText 文本 的 样式 ， 则 势必 会 影 
响 外 部 outerText 文本 的 样式 。 
因此 ， 用 户 如 果 需 要 定义 innerText 的 样式 且 不 影响 tagName3 以 外 的 文本 样式 ， 就 可 以 通过 包含 选 
择 方 法 进行 定义 ， 代 码 如 下 所 示 : 














tagNamel tagName2 tagName3 





Property: value;} 


在 上 面 的 代码 中 ， 以 包含 选择 的 方式 定义 了 包含 在 tagNamel 和 tagName2 标签 中 的 tagName3 标签 
的 CSS 样式 。 同 时 ， 不 影响 tagNamel 标签 外 的 tagName3 标签 的 样式 。 

包含 选择 方法 不 仅 可 以 将 多 个 标签 选择 器 组 合 起 来 使 用 ,同时 也 适用 于 id 选择 器 、 类 选择 器 等 多 种 
选择 器 。 例 如 ， 在 本 节 实例 及 之 前 章节 的 实例 中 ,就 使 用 了 大 量 的 包含 选择 方法 ， 如 下 所 示 : 





#mainFrame #copyright 

#copyrightText{ 
line-height:40px; 
color:#444652; 
text-align:center; 





包含 选择 方法 在 各 种 Web 标准 化 的 网 页 中 都 得 到 了 广泛 的 应 用 。 使 用 包含 选择 方法 . 可 以 使 CSS 
代码 的 结构 更 加 清晰 ,同时 使 CSS 代码 的 可 维护 性 更 强 。 在 更 改 CSS 代码 时 ,用 户 只 需要 根据 包含 选择 
的 各 种 标签 ,按照 包含 选择 的 顺序 进行 查找 ， 即 可 方便 地 找到 相关 语义 的 代码 进行 修改 。 


12.5.2 ”分 组 选择 


分 组 选择 是 一 种 用 于 同时 定义 多 个 相同 CSS 样式 的 标签 时 使 用 的 一 种 选择 方法 . 其 可 以 通过 一 个 选 
择 器 组 ， 将 组 中 包含 的 选择 器 定义 为 同样 的 样式 。 在 定义 这 些 选 择 器 时 .需要 将 这 些 选择 器 以 逗号 “， 
隔 开 ， 如 下 所 示 : 
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Selectorl , selector2 { Property: Value ; } 





在 上 面 的 代码 中 ，selectorl 和 selector2 分 别 表 示 应 用 相同 样式 的 两 个 选择 器 .而 Property 表示 CSS 
样式 属性 ，value 表示 CSS 样式 属性 的 值 。 在 一 个 CSS 的 分 组 选择 方式 中 .人 允许 用 户 定义 任意 数量 的 选 
择 器 ,例如 ， 在 定义 网 页 中 body 标签 以 及 所 有 的 段落 、 列 表 的 行 高 均 为 18px， 其 代码 如 下 所 示 : 








body yp rn mL sll yr on. 
line-height : 1l8px ; 
} 








在 许多 网 页 中 .分 组 选择 符 通常 用 于 定义 一 些 语义 特殊 的 标签 或 伪 选 择 器 。 例 如 ， 在 本 节 实例 中 ， 
定义 超 链 接 的 样式 时 , 就 将 超 链接 在 普通 状态 下 以 及 已 访问 状态 下 时 的 样式 通过 之 前 介绍 过 的 包含 选择 、 
分 组 选择 两 种 方法 ， 定 义 在 同一 条 CSS 规则 中 : 

















#mainFrame #newsBlock .blocks . 
newsList .newsListBlock ul 1i 
a:link , #mainFrame #newsBlock . 
blocks .newsList .newsListBlock ul 
li a:visited { 

font-size:12px; 

color:#444652; 

text-decoration:none; 


} 


在 编写 网 页 的 CSS 样式 时 ， 使 用 分 组 选择 方法 可 以 方便 地 定义 多 个 XHTML 元 素 标签 的 相同 样式 ， 
提高 代码 的 重用 性 。 但 是 ， 分 组 选择 方法 不 宜 使 用 过 滥 ， 否 则 将 降低 代码 的 可 读 性 和 结构 性 ， 使 代码 的 
判读 相对 困难 。 

12.5.3 ”通用 选择 


通用 选择 方法 的 作用 是 通过 通配符 “* .对 网 页 标签 进行 选择 操作 。 使 用 通用 选择 方法 .用户 可 以 
方便 地 定义 网 页 中 所 有 元 素 的 样式 .代码 如 下 所 示 : 

















* { property: value ; } 





在 上 面 的 代码 中 ,通配符 星 号 “* ”可 以 替代 网 页 中 所 有 的 元 素 标签 。 因 此 ， 设置 星 号 “* ”的 样式 
属性 .就 是 设置 网 页 中 所 有 标签 的 属性 。 例 如 .定义 网 页 中 所 有 标签 的 内 联 文本 字体 大 小 为 12px， 其 代 
码 如 下 : 














sont -Size 2 12 Des 


同 理 . 通配符 也 可 以 结合 选择 方法 .定义 某 一 个 网 页 标签 中 谋 套 的 所 有 标签 样式 。 例 如 .定义 i 为 
testDiv 的 层 中 所 有 文本 的 行 高 为 30px， 其 代码 如 下 : 


#testDiv * { line-height : 30 px ; } 
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y 朋 ij 前 使 用 CSS 样式 表 


使 用 Dreamweaver， 用户 可 以 方便 地 为 网 页 添加 CSS 样式 表 . 并 对 CSS 样式 表 进行 编辑 。 本 节 主 要 
讲述 如 何 使 用 CSS 样式 表 . 主要 包括 两 种 使 用 方法 . 即 链 接 外 部 CSS 和 创建 CSS 规则 。 用 户 通过 对 本 节 
的 学 习 , 可 以 了 解 如 何 使 用 CSS 样式 表 、 什 么 是 链接 外 部 CSS 和 怎样 创建 CSS 规则 . 为 后 面 的 几 章 内 容 
奠定 基础 。 


12.6.1 ”链接 外 部 CSS 


使 用 外 部 CSS 的 优点 是 用 户 可 以 在 多 个 XHTML 文档 中 使 用 同一 个 CSS 文件 .通过 一 个 文件 控制 
这 些 XHTML 文档 的 样式 。 在 Dreamweaver 中 打开 网 页 文档 , ， 然 后 执行 【窗口 】| 【CSS 样式 】 命 令 ， 
打开 【CSS 样式】 面板 。 在 该 面板 中 单 击 【附加 样式 表 】 按 钮 ， 即 可 打开 【链接 外 部 样式 表 】 对 话 框 。 

在 对 话 框 中 ， 用 户 可 设置 CSS 文件 的 URL 地 址 ， 以 及 添加 的 方式 和 CSS 文件 的 媒体 类 型 。 其 中 ， 
【添加 为 】 选 项 包括 两 个 单 选 按 钮 。 当 选择 【链接 】 时 ，Dreamweaver 会 将 外 部 的 CSS 文档 以 link 标签 导 
入 到 网 页 中 ;而 当选 择 【 导 入 】〗 时 ，Dreamweaver 则 会 将 外 部 CSS 文档 中 的 所 有 内 容 复 制 到 网 页 中 ， 作 
为 内 部 CSS。 

【媒体 】 选 项 的 作用 是 根据 打开 网 页 的 设备 类 型 ， 判 断 使 用 哪 一 个 CSS 文档 。 在 Dreamweaver 中 提 
供 了 9 种 媒体 类 型 。 


























表 12-4 媒体 类 型 
说 明 

用 于 所 有 设备 类 型 

用 于 语音 和 音乐 合成 器 

braille 用 于 触觉 反馈 设备 

handheld 用 于 小 型 或 手提 设备 

print 用 于 打印 机 

projection 用 于 投影 图 像 ， 如 幻灯 片 

screen 用 于 计算 机 显示 器 

tty 用 于 使 用 固定 间距 字符 格 的 设备 ， 如 电 传 打字 机 和 终端 

tv 用 于 电视 类 设备 


用 户 可 以 通过 【链接 外 部 样式 表 】 为 同一 网 页 导入 多 个 CSS 样式 规则 文档 ， 然 后 指定 不 同 的 媒体 。 
这 样 ， 当 用 户 以 不 同 的 设备 访问 网 页 时 ， 将 呈现 各 自 不 同 的 样式 效果 。 


12.6.2 创建 CSS 规则 


在 Dreamweaver 中 ， 人 允许 用 户 为 任何 网 页 标签 、 类 或 JD 等 创建 CSS 规则 。 在 【CSS 样式 】 面 板 中 
单 击 【 新 建 CSS 规则 】 按 钮 ， 即 可 打开 【新 建 CSS 规则 】 对 话 框 。 

【新 建 CSS 规则 】 对 话 框 中 主要 包含 三 种 属性 设置 . 分别 介 绍 如 下 。 

【选择 器 类 型 】 的 设置 主要 用 于 为 创建 的 CSS 规则 定义 选择 器 的 类 型 ， 其 主要 包括 如 表 12-5 所 示 的 
几 个 选项 。 
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表 12-5 选择 器 类 型 
说 















定义 创建 的 选择 器 为 类 选择 器 
定义 创建 的 选择 器 为 ID 选择 器 

定义 创建 的 选择 器 为 标签 选择 器 
定义 创建 的 选择 器 为 带 选择 方法 的 选择 器 或 伪 类 选择 器 








【选择 器 名 称 】 选 项 的 作用 是 设置 CSS 规则 中 选择 器 的 名 称 ， 其 与 【选择 器 类 型 】 选 项 相关 联 。 当 
用 户 选 择 的 【选择 器 类 型 】 为 【类 】 或 ID 时 . 用户 可 在 【选择 器 名 称 】 的 输入 文本 框 中 输入 类 选择 器 或 
了 D 选择 器 的 名 称 : 当选 择 【 标 签 】 时 .在 【选择 器 名 称 】 中 将 出 现 XHTML 标签 的 列表 : 而 如 果 选 择 【 复 
合 内 容 ]， 在 【选择 器 名 称 】 中 将 出 现 4 种 伪 类 选择 器 。 

【规则 定义 】 项 的 作用 是 帮助 用 户 选择 创建 的 CSS 规则 属于 内 部 CSS 还 是 外 部 CSS。 如 果 网 页 文档 
中 没有 链接 外 部 CSS， 则 该 项 中 将 包含 两 个 选项 ， 即 【 仅 限 该 文档 】 和 【新 建 样式 表 文件 ]。 如 果 用 户 选 
择 【 仅 限 该 文档 ] ， 那 么 创建 的 CSS 规则 将 是 内 部 CSS: 而 如 果 用 户 选择 【新 建 样式 表 文件 ]， 那 么 创建 
的 CSS 规则 将 是 外 部 CSS。 


了 广 必 编辑 CSS 规则 


Dreamweaver 提供 了 可 视 化 的 方式 . 帮助 用 户 定义 各 种 CSS 规则 。 在 CSS 面板 中 选择 已 定义 的 CSS 
规则 , 即 可 在 其 下 方 的 【属性 】 列 表 中 单 击 其 属性 在 右 侧 的 文本 框 中 编辑 CSS 规则 中 已 有 的 各 种 属性 。 
本 节 主 要 讲述 CSS 的 7 种 规则 ， 主 要 包括 类 型 规则 、 背 景 规则 、 区 块 规则 、 方 框 规则 、 边 框 规则 、 列 表 
规则 和 定位 规则 。 用 户 通过 对 本 节 的 学 习 ， 可 以 了 解 CSS 的 规则 ， 为 后 面 的 几 章 内 容 奠 定 基础 。 


12.7.1 类 型 规则 


如 果 需 要 为 CSS 规则 添加 新 的 属性 ， 则 















































可 以 单 击 【 属 性 】 列 表 最 下 方 的 【添加 属性 】 
文本 ， 在 弹出 的 下 拉 列 表 中 选择 相应 的 属性 ， | 忆 es ,AU 
将 其 添加 到 CSS 规则 中 。 除 此 之 外 ， 还 可 以 Iasin®: 一 区 mwithtD 
单 而 [CSS 样式 】 面板 中 的 【编辑 样式 ] 按钮 | i 
打开 【CSS 规则 定义 〗 对 话 框 , 为 CSS 规则 Te © 加 
添加 、 编 辑 和 删除 属性 。[CSS 规则 定义 】 对 Birenad 
话 框 的 列表 菜单 中 包括 8 种 CSS 的 分 类 . 单 Bam 
击 分 类 ， 即 可 打开 相应 的 属性 。 

类 型 规则 的 作用 是 定义 文档 中 所 有 文本 Ci SE ER FE 





























的 各 种 属性 。 在 【CSS 规则 定义 】 对 话 框 中 选 
择 【 分 类 】 列 表 中 的 【类 型 ]， 即 可 打开 类 型 图 12-1 类 型 规则 
规则 .如 图 12-1 所 示 。 











学 经 典 





网 页 设计 与 网 站 建设 自学 经 典 


网 页 设计 与 网 





12.7.2 ”背景 规则 


背景 规则 的 作用 是 设置 网 页 中 各 种 容器 对 象 的 背景 属性 。 如 图 12-2 所 示 , 在 该 规则 所 在 的 列表 对 话 
框 中 ， 可 以 设置 网 页 容器 对 象 的 背景 颜色 、 图 像 以 及 其 重复 的 方式 和 位 置 等 ， 共 包含 6 种 基本 属性 .如 
表 12-6 所 示 。 























zyzp 的 Cs 义 (在 indexc Ee 
分 类 背景 
| Backproumd-color CE): 国 
Backer ound-inage CD ~ 
Backeround-repeat (R) 
Background-attachaent (I) = 
Backeromnd-positien 0 = [x 
Backeround-position (1) = [px 
BET 应 用 内 
图 12-2 背景 规则 


表 12-6 背景 规则 的 基本 属性 
属 性 名 作 用 典型 属性 值 及 解释 


本 以 十 六 进 制 数字 为 基础 的 颜色 值 ， 可 通过 颜色 拾 
Background-color 定义 网 页 容器 对 象 的 背景 颜色 取 器 进行 迁 返 


Background-image 定义 网 页 容器 对 象 的 背景 图 像 | 以 URL 地 址 为 属性 值 , 扩展 名 为 jpeg、gif 或 png 
i no-repeat (不 重复 )、repeat (默认 值 ， 重 复 )、 
定义 网 页 容器 对 象 的 前 巡 因 保 | opcatx (水 平方 向 重复 )、repeatiy (和 直方 向 重 
重复 方式 复 ) 等 


a 定义 网 页 容器 对 象 的 背景 图 像 | scroll (默认 值 ,定义 背景 图 像 随 对 象 内 容 滚动 )、 
ackground-al 滚动 方式 fixed (背景 图 像 固 定 ) 


Background-repeat 







Background-position(X) 


定义 网 页 容器 对 稼 的 背景 国 像 | 长 度 值 (也 认 为 0) 或 1ef ( 居 左 )、center (居中 ) 
水 平 坐标 位 置 和 Tight ( 居 右 ) 
人 定义 网 页 容器 对 象 的 背 及 图像 | 长 度 值 ( 联 认为 0) 或 to (项 对 齐 )、center (中 
a 线 对 齐 ) 和 bottom (底部 对 齐 ) 
12.7.3 ”区 块 规则 
区 块 规则 是 一 种 重要 的 规则 ， 其 作用 是 定义 文本 段落 及 网 页 容器 对 象 的 各 种 属性 。 在 区 块 规则 中 


用 户 可 设置 单词 、 字 母 之 间 插 入 的 间隔 宽度 、 垂 直 或 水 平 对 齐 方 式 、 段 首 缩 进 值 以 及 空格 字符 的 处 理 方 
式 和 网 页 容器 对 象 的 显示 方式 等 ， 如 图 12-3 所 示 。 
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Vord-spacing G) 


yertieal-alim 四 : 

Text-alimGD 
Text-indent OD): 
White-space ): - 


Display D) ~ 


Letter-spacine LD): -|= 


[malt 




















地 助 吕 蕊 到 二 上 LS 























图 12-3 区 块 规则 


12.7.4 方 框 规 则 


方 框 规则 的 作用 是 定义 网 页 中 各 种 容器 对 象 的 属性 和 显示 方式 。 在 方 框 规则 中 .用 户 可 设置 网 页 容 
器 对 象 的 宽度 、 高 度 、 浮 动 方式 、 禁 止 浮动 方式 ， 以 及 网 页 容器 内 部 和 外 部 的 补丁 等 。 根 据 这 些 属性 ， 
用 户 可 方便 地 定制 网 页 容器 对 象 的 位 置 ， 如 图 12-4 所 示 。 












































分 类 方 杠 
Tidh) ; 20 "EE nw; 四 
Heieht OW) wip | DeecC) - 
Padding Nargin 
国 全 部 相同 G) 国 全 部 相同 @) 
Top@) = = Topg) = [x 
Right @) ; “iin -| mithtG) ™ lps 
Botton @) -pz -| BottonM) : Pp 
Lefttd) -px ~ LeftG) 四 
项 助 中 [5 应 用 多、 
图 12-4 方 框 规则 


12.7.5 边框 规则 


边框 规则 的 作用 是 定义 网 页 容器 对 象 的 4 条 边框 线 样式 。 在 边框 规则 中 ，Top 代表 项 部 的 边框 线 ， 
Right 代表 右 侧 的 边框 线 . Bottom 代表 底部 的 边框 线 . 而 Left 代表 左 侧 的 边框 线 。 如 果 选 择 【 全 部 相同 】. 
则 4 条 边框 线 将 被 设置 为 相同 的 属性 值 ， 如 图 12-5 所 示 。 
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学 经 . 
学 经 典 




















Style Wiath Color 
贺 全 部 相同 G) 园 全 部 相同 @) 团 全 部 相同 @) 
| TopD 区 ~ 区 -| 力 
要 Right @) : ~ =] 园 
| Botton B) - -|x 辕 
Left LD) ~ ”|[px 恒 
ET 应 用 凶 
图 12-5 边框 规则 


其 【边框 】 规 则 中 的 各 选项 组 的 具体 含义 如 表 12-7 所 示 。 


表 12-7 边框 规则 属性 

典型 属性 值 及 解释 
none (默认 值 ， 无 边框 线 )、dotted (点 划 线 )、dashed (虚线 )、solid ( 实 
线 )、double( 双 实 线 )、groove (3D 四 档 )、ridge (3D 凸 档 ) 、inset (3D 
媚 边 )、outset (3D 凸 边 ) 
由 浮 点 数字 和 单位 组 成 的 长 度 值 ， 默 认 值 为 0 
以 十 六 进 制 数字 为 基础 的 颜色 值 ， 可 通过 颜色 拾取 器 进行 选择 





用 















定义 边框 线 的 样式 


定义 边框 线 的 宽度 
定义 边框 线 的 颜色 


12.7.6 ”列表 规则 
列表 规则 的 作用 是 定义 网 页 中 的 列表 对 象 ， 其 中 的 属性 及 其 作用 如 表 12-8 所 示 。 


表 12-8 列表 规则 属性 

典型 属性 值 及 解释 

disc (实心 圆 项 目 符号 ， 默 认 值 ) 、circle (空心 加 项 目 符号 )、square 

定义 列表 的 项 目 | (矩形 项 目 符号 ) 、decimal (阿拉 伯 数 字 )、lower-roman (小 写 罗 马 
符号 类 型 数字 )、upper-roman (大 写 罗 马 数 字 )、loweralpha (小 写 英文 字母 )、 

upper-alpha (大 写 英文 字母 ) 以 及 none (无 项 目 列表 符号 ) 

none (默认 值 ， 不 指定 图 像 作为 项 目 列表 符号 ) ，url(file) (指定 路 径 

和 文件 名 的 图 像 地 址 ) 

outside (将 列表 项 目 符号 放 在 列表 之 外 ， 且 环绕 文本 ， 不 与 符号 对 

齐 ， 默 认 值 )、inside (将 列表 项 目 符号 放 在 列表 之 内 ， 且 环绕 文本 

根据 标记 对 齐 ) 


Style 



























自 定义 列表 的 项 
目 符号 图 像 


List-style-image 









定义 列表 的 项 目 
符号 所 在 位 置 





List-style-position 












属性 与 方 框 规 则 中 的 同名 属性 完全 相同 ，Placement 属性 用 于 设置 AP 元 素 的 定位 方式 .Clip 属性 用 
于 设置 AP 元 素 的 剪 切 方式 ， 如 图 12-6 所 示 。 
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| List-style-type ([): 一 
| List-style-inage (): em 
| | List-style-Position(E): - 
| 鞍 
EET a] [5 有 岂 
图 12-6 列表 规则 


12.7.7 ”定位 规则 


定位 规则 多 用 于 CSS 布局 的 网 页 ， 可 设置 各 种 AP 元 素 、 层 的 布局 属性 。 在 【定位 】 规 则 中 ，Width 
和 Height 等 两 个 属性 与 【 方 框 】 规 则 中 的 同名 属性 完全 相同 ， Placement 属性 用 于 设置 AP 元 素 的 定位 方 
式 ，Clip 属性 用 于 设置 AP 元 素 的 剪 切 方式 。 其 【定位 】 规 则 中 的 一 些 属性 和 作用 ， 如 表 12-9 所 述 。 

















表 12-9 ”定位 规则 属性 












典型 属性 值 及 解释 
absolute (绝对 定位 方式 ， 以 Placement 属性 的 值 定义 网 页 容 
器 对 象 的 位 置 )、fixed (IE 7 以 上 版 本 支持 ， 遵 从 绝对 定位 
方式 ， 但 需要 遵守 一 些 规则 )、relative (遵从 绝对 定位 方式 ， 
但 对 象 不 可 层 登 ) static (默认 值 ,无 特殊 定位 , 遵从 XHTML 
定位 规则 ) 

定义 网 页 容器 对 象 的 | inherite (默认 值 , 继承 父 容器 的 可 见 性 )、visible (对 象 可 视 )、 

hidden (对 象 隐藏 ) 

定义 网 页 容器 对 象 的 | auto (默认 值 ， 根 据 容 器 在 网 页 中 的 排列 顺序 指定 层 登 顺序 ) 

层 受 顺序 以 及 整 型 数值 (可 为 负 值 ， 数 值 越 大 则 层 登 优先 级 越 高 ) 
定义 网 页 容器 对 象 的 
溢出 设置 


定义 网 页 容器 对 象 的 
定位 方式 


了 Position 






Visibility 



















visible (默认 值 ， 溢 出 部 分 可 见 )、hidden (溢出 部 分 隐藏 )、 
scroll (总 是 以 滚动 条 的 方式 显示 溢出 部 分 )、auto (在 必要 
时 自动 裁 切 对 象 或 显示 滚动 条 ) 

auto (上 默认 值 ， 无 特殊 定位 ) 以 及 由 浮 点 数字 和 单位 组 成 的 
长 度 值 ， 可 为 负数 

auto (上 默认 值 ， 无 特殊 定位 ) 以 及 由 浮 点 数字 和 单位 组 成 的 
长 度 值 ， 可 为 负数 

auto (上 默认 值 ， 无 特殊 定位 ) 以 及 由 浮 点 数字 和 单位 组 成 的 
长 度 值 ， 可 为 负数 


Overflow 





定义 网 页 容器 对 象 与 
父 容器 的 顶部 距离 
定义 网 页 容器 对 象 与 
父 容 器 的 右 侧 距 离 
定义 网 页 容器 对 象 与 
父 容 器 的 左 侧 距离 





Top 





Placement | Right 
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续 表 
典型 属性 值 及 解释 
定义 网 页 容器 对 象 与 | auto (默认 值 ， 无 特殊 定位 ) 以 及 由 浮 点 数字 和 单位 组 成 的 
父 容器 的 底部 距离 长 度 值 ， 可 为 负数 
定义 网 页 容器 对 象 项 | auto (默认 值 ， 无 特殊 定位 ) 以 及 由 浮 点 数字 和 单位 组 成 的 









Placement 














部 剪 切 的 高 度 长 度 值 ， 可 为 负数 
定义 网 页 容器 对 象 右 | auto ( 歇 认 值 ， 无 特殊 定位 以 及 由 浮 皮 数字 和 划 位 组 成 的 
合 剪 切 的 宽度 长 度 值 ， 可 为 负数 
Eup 定义 网 页 容器 对 象 底 | auto (区 认 值 ， 无 特殊 定位 ) 以 及 由 淳 皮 款 字 和 单位 组 成 的 
部 剪 切 的 高 度 长 度 值 ， 可 为 负数 
ao (〈 联 认 值 无 特殊 定位 ) 以 及 由 淳 卜 款 字 和 单位 组成 的 
长 度 值 ， 可 为 负数 
扩展 效果 规则 的 作用 是 设置 一 些 不 常见 的 CSS 规则 属性 .例如 打印 时 的 分 页 设置 以 及 CSS 的 滤 镜 效 





果 等 ， 如 图 12-7 所 示 。 








Pager-brearbetore @) ~ 
Page-brearafter GD) - 


Cursor C) = 


Filter ®) = 











图 12-7 扩展 规则 


着 过 人 x 战 EE 


本 章 概要 性 地 介绍 了 设计 网 页 元 素 样式 ， 内 容 包 括 CSS 概述 、CSS 样式 分 类 、CSS 基本 语法 、CSS 
选择 器 、CSS 选择 方法 、 使 用 CSS 样式 表 和 编辑 CSS 规则 ,为 本 书后 续 的 学 习 打 下 坚实 的 基础 接 下 来 
我 们 通过 两 个 实例 来 对 本 章 的 内 容 进行 实践 。 


12.8.1 实战 : 制作 企业 介绍 页 面 


随 着 互联 网 的 普及 和 不 断 发 展 ， 很 多 企业 都 意识 到 网 络 营销 的 必要 性 和 重要 性 . 纷纷 建立 企业 网 站 
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和 网 络 营销 体系 。 企 业 网 站 在 设计 风格 上 给 人 感觉 简洁 . 突出 重点 。 本 例 使 用 CSS 技术 制作 一 个 索 利 亚 
豪华 宾馆 的 介绍 页 ， 主 要 使 用 CSS+DIV 布局 、ID 选择 器 、 类 选择 器 、 派 生 选 择 器 、4 种 CSS 伪 类 选择 
器 、CSS 中 的 padding 和 margin 属性 .练习 CSS+DIV 布局 、ID 选择 器 的 应 用 、 类 选择 器 的 应 用 、 派 生 
选择 器 的 应 用 、4 种 CSS 伪 类 选择 器 的 应 用 、CSS 中 padding 和 margin 属性 的 设置 ， 如 图 12-8 所 示 。 








索 利 亚 豪 华 酒店 








图 12-8 制作 企业 介绍 页 面 


STEP|01 新 建 空白 文档 ， 在 【页 面 属性 】 对 话 框 中 设置 大 小 、 文 本 颜色 、 左 边 距 和 标题 等 参数 值 ， 如 图 
12-9 一 图 12-12 所 示 。 






































~ 下 
文莉 3 
me 
DD mrs F 重 一 C3 Beotstrap 
二 DSS 
[EB iha 村 至 se 款 量 : 床 昌 二 误 池 本店 
本 ss 
要 Jecine = 
国 Rs | 文档 类 弄 : HTNLS 
二 me 
mm 网 加 CSs: 
是 :二 
mm 
ne 异 上 
本 测 R0BIR) 
六 加 各 Excract 从 Phetoshop 生 闪 中风 硬 
M00 








图 12-9 【新 建文 档 〗 对 话 杠 
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页 设计 与 网 站 建设 自学 经 典 ::: 
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图 12-10 【属性 〗 对 话 框 


: 加 ec 









































图 12-11 【页 面 属性 】 对 话 框 1 





分 类 标题 /编码 





标题 f): 案 利于 豪华 看 店 
文档 类 型 0TD) ; [DIML 10 Transitionsl 四 





90 











编码 BE): [Unicode QTR-6) 了 ] 芽 新 载 入 G) 
nicede 标准 化 表单 P): [C 蜗 范 分 解 上 后 忠 规 范 合成 ) =] 
回 包 括 Unicoae 签名 Com) G) 


文件 文件 夫 : .… .与 网 站 建设 源 文件 \12\ 制 作 企业 介绍 页 面 \ 
站 点 文件 夹 : C:\Vsers\ST\Docunents\ 未 命名 站 点 2\ 
































帮助 00 确定 ][ 取消 应 用 





图 12-12 【页 面 属 性 〗 对 话 框 2 


STEP|02 单 击 【插入 】| HTML | Div 按钮 . 在 弹出 的 【插入 Div】 对 话 框 中 设置 ID 为 container。 在 【CSS 
样式 】 面 板 中 单 击 【 新 建 CSS 规则 】 按 钮 ， 在 弹出 的 【新 建 CSS 规则 】 对 话 框 中 设置 【选择 器 名 称 】 为 
“#eontainer ， 单 击 【 确 定 】 按 钮 后 .打开 【#container 的 CSS 规则 定义 】 对 话 框 ， 设 置 相关 参数 ， 如 


12-13 一 图 
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12-17 所 示 。 
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图 12-13 【插入 Div】 对 话 框 





选择 如 类型: 
| 为 Css 规则 选择 上 下 文选 择 器 类 型 
到 《 仅 应 用 于 一 个 TNL 元素) 2 
























































图 12-14 【新 建 CSS 规则 】〗 对 话 框 




















背景 

Backeround-color C): 加 | 
Beckground-inage I): wl ~ 
Background-repeat B): - | 
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Background-position GO):- 区 司 

Bockground-position (1): px -= 

ELTY 已 枉 二 己 参 一 Camw | 























图 12-15 【#container 的 CSS 规则 定义 】 对 话 框 1 
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网 页 设计 与 网 站 建设 自学 经 典 
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图 12-16 【〖【#container 的 CSS 规则 定义 】 对 话 框 2 





STEP|03 使 用 相同 的 方法 ,在 了 D 为 container 的 层 中 插入 一 个 IJD 为 top 的 层 并 定义 其 CSS 样式 ， 并 在 
该 层 中 输入 文本 。 然 后 ,切换 至 【代码 】 视 图 ,将 光标 放置 在 “订单 管理 ”前 . 插入 <span></span> 标 签 ， 
如 图 12-18 一 图 12-20 所 示 。 

















#top { 
font-size: 22px; 
font-weight: bold; 
height: 40px; 
margin-left: 36pxj3 
padding-top: 35px; 


#container { 
background: url(images/bg.jpg); 
height: 695px; 
width: 765px; 
margin-left: 119px; 


图 12-17 CSS 样式 代码 图 12-18 CSS 样式 代码 
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图 12-19 页 面 效果 


STEP|04 切换 至 【设计 ]】 视 图 打开 【#top span 的 CSS 规则 定义 】〗】 对 话 框 ,设置 相关 参数 。 然 后 , 分 
别 为 各 个 文本 创建 链接 :如 图 12-21 和 图 12-22 所 示 。 


索 利 亚 豪华 酒店 <span><a href="#" titte="i 订 
单 管理 "> 订单 管理 </a>g&nbsp;&nbsp; snbsp; anbsp; | 
gnbsp;&nbsp;&nbsp;&nbsp; <a href="#" 
地 图 gnbsp;&nbsp;&nbsp; &nbsp; rs gnbsp; &nbsp;&nbsp; 
Wref="#" title=' 邯 助 中 心 "> 帮助 中 心 


</span> 




















图 12-20 CSS 样式 代码 图 12-21 CSS 样式 代码 
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STEP|05 在 [Css 样式 】 面 板 中 
CSS 规则 并 设置 参数 ， 如 图 12-23 所 示 。 


STEP|06 切换 至 【代码 】 视 图 .将 光标 放置 在 <a> 标 签 中 . 
为 超 链接 添加 title 属性， 如 图 12-24 所 示 。 


#container #top span a:Link, 

#container #top span a:visited { 
color: #f9f3cf; 
text-decoration: underline; 


} 


#container #top span a:hover { 
color: #ffa620; 
text-decoration: none; 


} 


图 12-23 CSS 样式 代码 





图 12-22 创建 链接 


分 别 新 建 “#top span a:link. #top span a:visited” 和 “#top span a:hover” 


添加 代码 “<a tile=" 订 单 管 理 " hre 伍 "#'>” 


<div id="t 
考取 洒 丰 店 <span> 


<a href="#" title="i] 单 管理 "> 订单 管理 </ 
a>g&nbsp;&nbsp;snbsp;énbsp; | 
anbspji&nbsp: ;nbsp;<a href="#" 
title=" 站 点 点 地 图 </a> 
i gnbsp;&nbsp; | 
&nbspji&nbspj&nbspj&nbspj<a href="#" 
titte "二 中 心 "> 帮助 中 心 </a> 

</span> 





图 12-24 CSS 样式 代码 


STEP|07 在 ID 为 container 的 层 中 插入 一 个 ID 为 main 的 层 并 定义 其 CSS 样式 .将 光标 放置 在 ID 为 main 
的 层 中 ， 插 入 一 个 ID 为 header 的 层 ， 如 图 12-25 所 示 。 





STEP|I08 然后 ， 在 ZD 为 header 的 层 中 . 单 击 【 插 入 】 面 板 中 的 Table 按钮 ， 创建 一 个 2 行 


x3 列 、【 宽 】 



































为 “678 像素 ”的 表格 ,【 对 齐 】 方 式 为 【居中 对 齐 】， 如 图 12-26 和 图 12-27 所 示 。 
Te EE 
表格 大 小 
行 数 2 到 : 3 

#main { 析 阁 真 度 : < [CE 双 
height: 3 边框 烤 细 :1 您 未 
width: ; 单元 格 边 下 图 
margin-right: $ 单元 格 间距 : 图 
margin-left: 有 标题 

} 

#header { EE 引 
background : ; ss 三 Ls 
height: 加 町 助 功能 
width: 5 标题- 
margin-top: 站 摘要 : 
margin-right: ; | 
margin-left: | = 
padding-top: | 二 

} EE Cm |] 


图 12-25 了 D 为 main 和 header 的 层 














图 12-26 Table 对 话 框 











来 =] calpun 





加 





:ellSpace 0 Border 0 


_18B 





STEP|09 将 光标 放置 在 第 1 




















单元 格 和 第 1 行 第 3 列 单元 格 抬 


BO 





Aie 区 





图 12-27 【属性 】 面 板 


行 第 1 列 的 单元 格 中 . 执行 
属性 】 面 板 中 ,设置 该 单元 格 的 宽度 和 对 齐 方 式 等 属性 。 使 用 相 


像 . 如 图 12-28 一 图 





Om 天 


【图 像 】 命 令 ， 为 单元 格 插入 图 像 。 
的 方法 ， 分 别 为 第 1 




















图 12-28 页 面 效果 


re 





人 WHO BO0™ 


on 


图 12-29 第 1 行 第 1 列 单 元 格 插 入 图 像 





Omi # 


ND 
Ommgo y= a0h WO lm 


on 


RS 


图 12-30 第 1 行 第 2 列 单元 格 插入 图 像 





Oil 天 


ommago wo 


on 


图 12-31 











”人 
水 平 站 | 天 庆 并 “| 区 0 325| 不 娄 行 0) 六 
| 可 


大 无 








第 1 行 第 3 列 单元 格 插入 图 像 


- BI 尝 反 生生 要 中 





[7 


图 12-32 单元 格 的 宽度 和 对 齐 方式 
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eee 





STEP|10 选择 第 2 行 单元 格 . 在 【属性 】 面 板 中 合并 第 2 行 单元 格 。 然 后 插入 图 像 ， 并 在 【属性 】 面 板 
中 设置 【链接 】 为 “# 、【 边 框 】 为 0， 为 该 图 像 创建 链接 。 使 用 相同 的 方法 ， 插 入 并 为 其 他 导航 图 像 创 
建 链接 ， 如 图 12-33 和 图 12-34 所 示 。 




















关于 我 们 





图 12-33 页 面 效果 





























属性 
pn] | 林 式 四 无 "EE -BI 举措 汪汪 要 中 可 
ss DW 无 -全 Dz "QO 寻 问 5 
到 行 水 平 中 | 默认 7] 殉 0) 不 换行 中) 门 是 B@[J 

口交 天 OA | 高 09 二 标量 中 口 











图 12-34 【属性 】 面 板 


STEP|11 在 ID 为 main 的 层 中 插入 一 个 ID 为 mainb 的 层 并 定义 其 CSS 样式， 如 图 12-35 所 示 。 
STEP|12 然后 ,输入 文本 并 将 光标 放置 在 “ 索 利 亚 ” 前 并 按 Enter 键 , 文本 自动 换行 。 定 义 段落 标签 <p> 
的 CSS 样式 ， 如 图 12-36 和 图 12-37 所 示 。 








#container #main #mainb p { 
font-size: 12px; 
Line-height: 22 
font-weight: 

















9 Color: # 

mainb { background: 
font-size: 16px; Ee 
font-weight: bold; display: block; 
color: #8c4666j padding: Spx; 
margin-top: 10px; ee a 
margin-left: 13px; margin-top: 2px; 

} } 

图 12-35 ID 为 mainb 的 层 图 12-36 <p> 标 签 


关于 我 们 关于 我 们 房 内 设施 





图 12-37 页 面 效果 





网 页 设计 与 网 站 建设 自学 经 典 


12.8.2 ”实战 : 制作 多 彩 时 尚 网 
在 网 页 中 文本 属性 不 可 能 是 一 成 不 变 的 ， 需 要 改变 文本 属性 来 使 网 页 看 起 来 更 美观 ， 本 例 通过 定义 
文本 属性 、 文 本 显示 方式 来 制作 多 彩 时 尚 网 页 页 面 ， 主 要 练习 定义 文本 属性 、 定 义 文本 显示 方式 ， 如 图 


12-38 所 示 。 
STEP|01 打开 素材 页 面 “index.html ,将 光标 置 于 ID 为 leftmain 的 Div 层 中 , 单 击 【 插 入 】| HIML | Div 


按钮 ,创建 ID 为 title 的 Div 层 . 并 设置 其 CSS 样式 属性 . 如 图 12-39 一 图 12-41 所 示 。 


























站 多 更 HG 网 





float 

口 边框 

border : #b4b4b4 lpx solid 
We 
width :px 

style : sold 

color : [本 | :bsbab4 


图 12-39 ID 为 leftmain 的 Div 层 


</div> 





图 12-40 ID 为 leftmain 的 Div 层 


STEPI02 在 ID 为 title 的 Div 层 中 输入 文本 ， 然 后 再 单 击 Div 按钮 ， 创建 类 名 称 为 rows 的 Div 层 . 并 设 
置 其 CSS 样式 属性 ， 如 图 12-42 和 图 12-43 所 示 。 

















一 一 一 Fa 
OBE 避 曙 ES 

赂 名 号 EL 

6 四 

i 

So 三 

ee a 

3 一 口 信 

i 时 尚 网 > 时 沿 列 表 1 

图 12-41 JD 为 title 的 Div 层 图 12-42 页面 效果 图 12-43 创建 类 名 称 为 TOWs 的 Div 层 
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STEP|03 然后 将 光标 置 于 类 名 称 为 rows 的 Div 层 中 .创建 类 名 称 为 pic 的 Div 层 . 并 设置 其 CSS 样式 


属性 ， 如 图 12-44 所 示 。 
STEP|04 按照 相同 的 方法 . 单 击 Div 按钮 . 创建 类 名 称 为 detail 的 Div 层 . 并 设置 其 CSS 样式 属性 。 然 


后 将 光标 置 于 类 名 称 为 pic 的 Div 层 中 .插入 图 像 “picl.jpg”. 如 图 12-45 和 图 12-46 所 示 。 












































er 
中 团 口 回味 
出 市 局 
width 490 px 
height 140 px 
margin 讼 吾 肖 
Op 
~” 10 px 0 0 pw 
teat + 圈 当 日 
口 动 在 Op 
border ____: lpesold#s29292 float : 圈 委 甸 
[= = E 
et 
oor : 国 ,om Mne-beight : 25px 





图 12-44 创建 类 名 称 为 pic 的 Div 层 ”图 12-45 创建 类 名 称 为 detail 的 Div 层 图 12-46 页 面 效 果 


STEP|05 将 光标 置 于 类 名 称 为 detail 的 Div 层 中 , 输入 文本 , 然后 在 【属性 】 面 板 中 设置 【格式 】 为 【 标 
题 ?]。 在 标签 栏 选择 h2 标签 ,然后 在 CSS 样式 属性 中 设置 文本 颜色 为 “ 蓝 色 ” (级 092 介 ) ,如 图 12-47 一 
图 12-49 所 示 。 























用 性 
[Fe me] 格式 0) [本 是 2 了 类 : -BI 总 描写 当中 @ 
好 css 无 0 -QB BO ~ 吃 
文 析 标 晒 名 和 8 站 网 | CE [Si#i5B 
图 12-47 【属性 〗】 面 板 
标题 Css) 

标题 字体 9): 品 〈 同 页 面 字体 ) ~ - ~ 

标题 10) 7 | "| 辆 

标题 2C) | 了 -| 到 #1092f1 

标题 3G) ~ | "| 加 

标题 4(4) 7 =] 转 

标题 565) > [rx -| 辐 

标题 666) = [x -| 辐 

寺 动 00 [saw |] 




















图 12-48 【页 面 属性 〗 对 话 框 
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STEP|06 按 Enter 键 . 然后 输入 文本 。 在 CSS 样式 属性 中 分 别 创建 类 名 称 为 font2、font3、font4 的 样式 ， 
然后 选择 文本 ， 在 【属性 】 检 查 器 中 设置 【类 】。 其 中 . 文本 “关键 字 ” 设 置 为 font2, 文本 “劳力 士 经 
典 金 表 宝石 ”设置 为 font3， 其 他 文本 设置 为 font4， 如 图 12-50 一 图 12-53 所 示 。 
























































| 
+ -属性 + 属性 
国 回 Ma | 苛 呈 示 
国 文本 头角 字 : 劳力 士 经 区 全 胡 宝石 国 文本 
color Ly #1092f1 Fr 打 址 出 了 这 只 OYSTER ii #999999 
图 12-49 h2 标签 图 12-50 页 面 效 果 图 12-51 font2 
+ 一 属性 ad 
器 回味 国 器 加 有 
文本 国 文本 
color : 恩 | #869900 color : [| #676767 
图 12-52 font3 图 12-53 font4 





STEP|07 单 击 Div 按钮 ， 在 弹出 的 【插入 Div】 对 话 框 中 选择 Class 下 拉 列 表 中 的 rows， 单 击 【 确 定 】 
按钮 。 将 光标 置 于 该 层 中 , 按照 相同 的 方法 分 别 创建 类 名 称 为 pic、detail 的 Div 层 . 然后 在 pic 层 中 插入 
图 像 、 在 detail 层 中 输入 文本 ， 如 图 12-54 和 图 12-55 所 示 。 



































图 12-54 【插入 Div】 对 话 框 








图 12-55 页 面 效 果 


STEP|08 分 别 选择 格式 为 【标题 2】 的 文本 . 在 【属性 】 面 板 中 设置 【链接 】 为 “javascript-void(nulD);”. 
然后 在 标签 栏 选择 a 标签 .在 CSS 样式 属性 中 设置 其 CSS 样式 属性 ， 如 图 12-56 和 图 12-57 所 示 。 
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图 12-56 【属性 】 面 板 


#content #leftmain .rows .detail h2 a 








+ -属性 
3 EE 
文本 

color - #1092f1 

er :NITE 


图 12-57 a 标签 





第 13 章 


Web 2.0 布 局 方式 


Web 2.0 是 相对 于 Web 1.0 的 新 的 时 代 , 指 的 是 一 个 利用 Web 的 平台 , 由 用 户主 导 而 生成 的 内 容 互联 
网 产品 模式 ， 为 了 区 别传 统 由 网 站 雇员 主导 生成 的 内 容 而 定义 为 第 二 代 互 联网 ， 即 Web 2.0， 是 一 个 新 的 
时 代 。 在 标准 化 的 Web 页 设计 中 . 将 XHTML 中 所 有 块 状 标签 和 部 分 可 变 标签 视 为 网 页 内 容 的 容器 。 使 
用 CSS 样式 表 ， 用 户 可 以 方便 地 控制 这 些 容器 性 标签 ， 为 网 页 的 内 容 布局 ， 定 义 这 些 内 容 的 位 置 、 尺 二 
等 布局 属性 。 

本 章 主要 介绍 CSS 盒 模 型 、 流 动 定位 方式 、 绝 对 定位 方式 、 浮 动 定位 方式 和 综合 实战 。 通 过 本 章 的 
学 习 ， 我 们 可 以 知道 什么 是 Web 2.0 布局 方式 。 





:: 第 13 章 Web 2.0 布 局 方式 


国 3: 中 CSS 盒 模型 


CSS 盒 模型 是 CSS 布局 的 基础 . 它 规定 了 网 页 元 素 的 显示 方式 以 及 元 素 间 的 相互 关系 。 本 节 主 要 讲 
述 CSS 盒 模型 . 分 为 4 个 方面 的 内 容 . 即 CSS 盒 模型 结构 、 边界 、 边框 和 填充 。 用 户 通过 对 本 节 的 学 习 ， 
了 解 和 掌握 CSS 盒 模型 的 应 用 .为 后 期 的 网 站 建设 奠定 基础 。 


13.1.1 CSS 盒 模型 结构 








在 CSS 中 , 所 有 网 页 元 素 都 被 看 作 一 个 矩形 框 . 或 者 称 为 元 素 框 。CSS 盒 模型 描述 了 这 些 元 素 在 网 
页 布局 中 所 占 的 空间 和 位 置 . 效果 如 图 13-1 所 示 。 

















内 容 区 域 














图 13-1 CSS 伪 模 型 结构 


所 有 网 页 元 素 都 可 以 包括 4 个 区 域 : 内 容 区 、 填充 区 、 边框 区 和 边界 区 。 在 CSS 中 , 可 以 增加 填充 、 
边框 和 边界 的 区 域 大 小 ， 这 些 不 会 影响 内 容 区 域 ， 即 元 素 的 宽度 和 高 度 ， 但 会 增加 元 素 框 的 总 尺寸 。 定 
义 盒 模型 的 代码 如 下 : 


/* 定 义 使 模型 */ 
#box{ 
height:300px; /* 定 义 元 素 的 高 度 *#/ 
width:450px; /* 定 义 元 素 的 宽度 #/ 
margin:20px; /* 定 义 元 素 的 边界 */ 
padding:20px; /* 定 义 元 素 的 填充 */ 
border:solid 20px #C607 /* 定 义 元 素 的 边框 */ 











background-color:# FOFOFO; 
/* 定 义 元 素 的 背景 颜色 */ 
} 
根据 CSS 盒 模型 规则 ， 可 以 给 出 一 个 简单 的 盒 模型 尺寸 计算 公式 : 
元 素 的 总 宽度 = 左边 界 + 左边 框 + 左 填充 + 宽 + 右 填充 + 右边 框 + 右边 界 





:3 网 页 设计 与 网 站 建设 自学 经 典 :::: 


网 与 网 站 建设 自学 经 典 





元 素 的 总 高 度 = 上 边界 + 上 边框 + 上 填充 + 高 + 下 填充 + 下 边框 + 下 边界 


13.1.2 边界 

在 CSS 中 , 边界 又 被 称 作 外 补丁 ,用 来 定义 网 页 元 素 的 边界 。 适 当地 设置 边界 可 以 使 网 页 布局 条 理 
有 序 ， 整 体 看 起 来 优美 得 体 。 设 置 网 页 元 素 边界 最 简单 的 方法 是 使 用 margin 属性 ， 它 可 以 接受 任何 长 度 
单位 (如 像素 、 磅 、 英 寸 、 厘米、em)、 百 分 比 甚至 负 值 。 举 例如 下 : 





#box{ 


margin:1px; /* 定 义 元 素 四 边 边界 为 1px*/ 


margin:1lpx 2px; 


/* 定 义 元 素 上 下 边界 为 1px， 左右 边界 为 2px*/ 


margin:1pPXx 2px 3px; 
/* 定 义 元 素 上 边界 为 ]px， 左 右边 界 为 2px， 下 边界 为 3px*/ 


margin:lpx 2px 3px 4px; 
/* 定 义 元 素 上 边界 为 1px， 右 边界 为 2px， 下 边界 为 3px， 左 边界 为 4px*/ 


} 


效果 如 图 13-2 所 示 。 
人 iT 
































图 13-2 边界 


百 比 分 的 取 值 是 相对 于 父 元 素 的 宽度 来 计算 的 。 使 用 百分比 的 好 处 是 能 够 使 页 面 自 适应 窗口 的 大 小 ， 
并 能 够 及 时 调整 边界 宽度 。 


#box{ 
margin:10%; 


效果 如 图 13-3 所 示 。 


/* 边 界 为 body 宽度 的 10%*/ 
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margin 属性 的 值 还 可 以 设置 为 auto， 表 示 一 个 自动 计算 的 值 ， 这 个 值 通 常 为 0, 也 可 以 设置 为 其 他 


值 ， 这 个 主要 由 具体 浏览 器 来 确定 : 















































效果 如 图 13-4 所 示 。 


auto 还 有 一 个 重要 作用 就 是 用 来 实现 网 页 元 素 居中 对 齐 : 





margin:10px auto; 
/* 网 页 元 素 水 平 居 中 对 齐 */ 


网 页 设计 与 网 站 建设 自学 经 典 


有 :3 网 页 设计 与 网 站 建设 自学 经 典 :::: 





} 


效果 如 图 13-5 所 示 。 
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网 页 元 素 内 容 
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图 13-5 边界 


margin 属性 包含 margin-top、margin-right、margin-bottom 和 margin-left 4 个 子 属性 ， 用 来 单独 设置 
网 页 元 素 上 、 右 、 下 和 左边 界 的 大 小 。 代 码 举例 如 下 : 


芝 
O 


ER Spx*/ 


冯 总 
人 
3 


ig] 
pe 5 倍 */ 


bp 
a 
也 
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tom:5%; 
eo 5%*/ 


伏 


多 
a | | 


es 自动 */ 


从 


} 


效果 如 图 13-6 所 示 。 
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图 13-6 边界 
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以 上 4 个子 属性 的 详细 介绍 如 表 13-1 所 示 。 


表 13-1 margin 的 4 个 子 属性 
说 

定义 网 页 元 素 项 部 的 边界 (外 补丁 ) ， 其 属性 值 可 以 为 auto (默认 值 ， 取 浏览 
器 默认 值 ) 或 由 浮 点 数字 和 单位 组 成 的 长 度 值 以 及 百分比 

定义 网 页 元 素 左 侧 的 边界 (外 补丁 ) ， 其 属性 值 可 以 为 auto〔 上 默认 值 ， 取 浏览 
器 默认 值 ) 或 由 浮 点 数字 和 单位 组 成 的 长 度 值 以 及 百分比 

定义 网 页 元 素 右 侧 的 边界 (外 补丁 ) ， 其 属性 值 可 以 为 auto〔 默 认 值 ， 取 浏览 
器 默认 值 ) 或 由 浮 点 数字 和 单位 组 成 的 长 度 值 以 及 百分比 
定义 网 页 元 素 底部 的 边界 (外 补丁 ) ， 其 属性 值 可 以 为 anto (默认 值 ， 
器 默认 值 ) 或 由 浮 点 数字 和 单位 组 成 的 长 度 值 以 及 百分比 























Iargin-bottom 





13.1.3 边框 
网 页 元 素 的 外 边界 内 就 是 元 素 的 边框 ， 它 就 是 围绕 元 素 内 容 和 填充 的 一 条 或 多 条 线 。 网 页 中 很 多 修 








饰 性 线条 都 是 由 边框 来 实现 的 。 
设置 网 页 元 素 边框 最 简单 的 方法 就 是 使 用 border 属性， 该 属性 允许 用 户 定义 网 页 元 素 所 有 边框 的 样 
式 、 宽 度 和 颜色 

















#box{ 

border:solid 30px #F00; 

/* 定 义 边框 样式 为 实 线 、2px 宽 、 红 色 */ 
| 


效果 如 图 13-7 所 示 。 








re | 
































图 13-7 边框 
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计 与 网 站 建设 自学 经 典 ;:: 





建设 自 


每 个 网 页 元 素 都 包含 4 个 方向 上 的 边框 : border-top ( 顶 边 )、border-right (右边 ) 、borderbottom ( 底 


边 ) 和 borderleft (左边 ) ， 可 以 单独 定义 以 上 每 一 个 属性 : 


#box{ 


border-top:double 20px #F90; 
/* 定 义 元 素 上 边框 的 样式 、 宽 度 和 颜色 */ 
border-right:solid 30px #F00; 
/* 定 义 元 素 右 边框 的 样式 、 宽 度 和 颜色 */ 
border-bottom:double 20px #06F; 
/* 定 义 元 素 下 边框 的 样式 、 宽 度 和 颜色 #+/ 
border-left:solid 30px #F00; 
/* 定 义 元 素 左边 框 的 样式 、 宽 度 和 颜色 #*/ 
} 


效果 如 图 13-8 所 示 。 
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图 13-8 边框 


CSS 人 允许 用 户 单独 定义 网 页 元 素 的 边框 样式 ， 属 性 分 别 为 border-top-style 、border-right-style、 


border-bottom-style 和 border-left-style。 另 外 .还 可 以 使 用 border-style 统一 定义 边框 的 样式 。 示 例 代码 
如 下 : 





#box{ 

border-top-style:solid; 

/* 定 义 元 素 的 上 边框 样式 为 实 线 */ 
border-right-style:double; 
/+ 定义 元 素 的 右边 框 样式 为 双 线 */ 
border-bottom-style:solid; 
/+* 定 义 元 素 的 下 边框 样式 为 实 线 */ 
border-left-style:double; 
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/* 定 义 元 素 的 左边 框 样式 为 双 线 */ 
} 
或 者 
#box{border-style:solid double;} 
效果 如 图 13-9 所 示 。 
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图 13-9 边框 


边框 样式 是 边框 显示 的 基础 ，CSS 2 提供 了 如 表 13-2 所 示 的 几 种 边框 样式 。 

















表 13-2 边框 样式 
样式 说 明 
none 默认 值 ， 无 边框 ， 不 受 任何 指定 的 border-width 值 影响 
hidden 隐藏 边框 ，IE 不 支持 
dotted 定义 边框 为 点 线 
dashed 定义 边框 为 虚线 
solid 定义 边框 为 实 线 
double 定义 边框 为 双 线 边框 ， 两 条 线 及 其 间隔 宽度 之 和 等 于 指定 的 border-width 的 值 
groove 根据 边框 颜色 定义 3D 四 档 
Tidge 根据 边框 颜色 定义 3D 西 档 
inset 根据 边框 颜色 定义 3D 凹 边 
outset 根据 边框 颜色 定义 3D 凸 边 


CSS 允许 用 户 单独 定义 网 页 元 素 的 边框 宽度 ， 属 性 分 别 为 bordertop-width、border-right-width 、 
border-bottom-width 和 border-left-width。 另 外 . 还 可 以 使 用 boder-width 统一 定义 边框 的 宽度 。 示 例 代码 
如 下 : 


#box{ 
border-top-width:30px; 
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/* 定 义 元 素 的 上 边框 宽度 为 30px*/ 
border-right-width:50px; 
/* 定 义 元 素 的 右边 框 宽度 为 50px*/ 
border-bottom-width:30px; 
/* 定 义 元 素 的 下 边框 宽度 为 30px*/ 
border-left-width:50px; 
/* 定 义 元 素 的 左边 框 宽度 为 50px*/ 
} 
或 者 


#box{border-width:30px 50px 30px 50px;} 


效果 如 图 13-10 所 示 。 
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图 13-10 边框 


除了 可 以 为 元 素 的 边框 指定 具体 的 宽度 值 外 . 还 可 以 使 用 关键 字 thin、medium 和 thick。 这 几 个 关键 
字 没有 固定 的 宽度 ,它们 之 间 的 关系 是 : thick 比 medium 宽 , 而 medium 比 thin 宽 。 在 默认 状态 下 ,边框 
的 宽度 为 medium (中 )， 这 是 一 个 相对 宽度 ， 通 常 为 2~3px。 示 例 代码 如 下 : 











#box{ 
border-style:solid; 
/* 定 义 元 素 边框 的 样式 */ 
border-top-width:thin; 
border-right-width:medium; 
border-bottom-width:thick; 
border-left-width:medium; 

} 

或 者 

#box{ 
border-style:solid; 
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border-width:thin medium thick medium; 


} 


效果 如 图 13-11 所 示 。 









































F : 网 页 元 素 内 容 


























图 13-11 边框 


CSS 允许 用 户 单独 定义 网 页 元 素 的 边框 颜色 ， 属 性 分 别 为 border-top-color、border-right-color、 
border-bottom-color 和 border-left-color。 另 外 .还 可 以 使 用 border-color 统一 定义 边框 的 颜色 。 示 例 代码 
如 下 : 


#box{ 
border-style:solid; 
border-width:50px; 
/* 定 义 元 素 边 框 的 样式 和 宽度 */ 
border-top-color:#FF9; 
/* 定 义 元 素 上 边框 的 颜色 为 #FF9*/ 
border-right-color:#F60; 
/* 定 义 元 素 右 边框 的 颜色 为 #F60*/ 
border-bottom-color:#C30; 
/* 定 义 元 素 下 边框 的 颜色 为 #C30*/ 
border-left-color:#336; 
/* 定 义 元 素 左边 框 的 颜色 为 #336*/ 
册 
或 者 
#box{ 
border-style:solid; 
border-width:50px; 
border-color:#FF9 #F60 #C30 #336; 
上 


效果 如 图 13-12 所 示 。 
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网 页 设计 与 网 站 建设 自学 经 典 
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图 13-12 边框 


在 定义 边框 的 颜色 时 ,除了 可 以 使 用 十 六 进 制 颜色 值 外 ,还 可 以 使 用 颜色 名 和 RGB 颜色 值 : 


#box{ 
border-style:solid; 
border-width:50px; 
border-top-color:rgb(255,240,245); 
/* 使 用 RGB 颜色 值 定义 元 素 边框 颜色 */ 
border-right-color:Pink; 
/* 使 用 颜色 名 定义 元 素 边框 颜色 */ 
border-bottom-color:rgb(255,105,180); 
/* 使 用 RGB 颜色 值 定义 元 素 边框 颜色 */ 
border-left-color:DeepPink; 
/* 使 用 颜色 名 定义 元 素 边框 颜色 */ 

} 


效果 如 图 13-13 所 示 。 




















网 页 元 素 内 容 





























图 13-13 边框 
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13.1.4 填充 


在 CSS 中 , 填充 又 被 称 作 内 补丁 ,位 于 元 素 边 框 与 内 容 之 间 。 设 置 网 页 元 素 填充 最 简单 的 方法 是 使 
用 padding 属性 ， 示 例 代 码 如 下 : 





#box{ 

padding:10px; 

/* 定 义 元 素 四 周 填充 为 10px*/ 

padding:10px 20px; 

/* 定 义 元 素 上 下 填充 为 10px， 左 右 填充 为 20px*/ 

padding:10px 20px 30px; 

/* 定 义 元 素 上 填充 为 10px， 左 右 填充 为 20px， 下 填充 为 30px*/ 

padding:10px 20px 30px 40px; 

/* 定 义 元 素 上 填充 为 10px， 右 填充 为 20px， 下 填充 为 30px， 左 填充 为 40px*/ 
} 


效果 如 图 13-14 所 示 。 
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图 13-14 填充 





padding 属性 包含 padding-top、padding-right、padding-bottom 和 padding-left 4 个 子 属性 ， 用 来 单独 
设置 网 页 元 素 上 、 右 、 下 和 左 填充 的 大 小 : 示例 代码 如 下 : 





#box{ 
padding-top:S5px; 
/* 定 义 元 素 上 填充 为 5px*/ 
padding-right:S5em; 
/* 定 义 元 素 右 填充 为 字体 的 5 倍 */ 
padding-bottom: 5%; 
/* 定 义 元 素 下 填充 为 父 元 素 宽度 的 5%+*/ 
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padding-left:auto; 
/* 定 义 元 素 左 填充 为 自动 */ 
} 
效果 如 图 13-15 所 示 。 
LP BE PO PE BO BE PO PE PO EE 





















































图 13-15 填充 


以 上 4 个 子 属 性 的 详细 介绍 如 表 13-3 所 示 。 
表 13-3 padding 的 4 个 子 属性 







定义 网 页 元 素 顶 部 的 填充 (内 补丁 ) ， 其 属性 值 可 以 为 auto (默认 值 ， 
浏览 器 默认 值 ) 或 由 浮 点 数字 和 单位 组 成 的 长 度 值 以 及 百分比 
定义 网 页 元 素 左 侧 的 填充 (内 补丁 ) ， 其 属性 值 可 以 为 auto (默认 值 ， 
浏览 器 默认 值 ) 或 由 浮 点 数字 和 单位 组 成 的 长 度 值 以 及 百分比 
定义 网 页 元 素 右 侧 的 填充 (内 补丁 ) ， 其 属性 值 可 以 为 anto (默认 值 ， 
浏览 器 默认 值 ) 或 由 浮 点 数字 和 单位 组 成 的 长 度 值 以 及 百分比 

定义 网 页 元 素 底 部 的 填充 (内 补丁 ) ， 其 属性 值 可 以 为 auto (默认 值 ， 
浏览 器 默认 值 ) 或 由 浮 点 数字 和 单位 组 成 的 长 度 值 以 及 百分比 






padding-top 







padding-left 


padding-right 


padding-bottom 





EE : 2 | 流动 定位 方式 


在 Web 标准 化 布局 中 . 通常 包括 三 种 基本 的 布局 方式 ， 即 流动 布局 、 浮 动 布局 和 绝对 定位 布局 。 
中 . 最 简单 的 布局 方式 就 是 流动 布局 ,其 特点 是 将 网 页 中 各 种 布局 元 素 按照 其 在 XHTML ee 
像 水 从 上 到 下 的 流动 一 样 依次 显示 。 
在 流动 布局 的 网 页 中 . 用 户 无 须 设置 网 页 各 种 布局 元 素 的 补 白 属 性 。 例 如 .一 个 典型 的 XHTML 网 
.其 body 标签 中 通常 包括 头 部 、 导 航 条 、 主 体内 容 和 版 尾 4 个 部 分 ,使 用 div 标签 建立 这 4 个 部 分 所 
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在 的 层 的 代码 如 下 : 


<div id="header"></div> 

<!-- 网 页 头 部 的 标签 。 这 部 分 主要 包含 网 页 的 1ogo 和 banner 等 内 容 --> 
<div id="navigator"></div> 

<!-- 网 页 导航 的 标签 。 这 部 分 主要 包含 网 页 的 导航 条 --> 

<div id="content"></div> 

<!-- 网 页 主体 部 分 的 标签 。 这 部 分 主要 包含 网 页 的 各 种 版 块 栏目 --> 
<div id="footer"></div> 


<!-- 网 页 版 尾 的 标签 。 这 部 分 主要 包含 尾部 导航 条 和 版 权 信息 等 内 容 --> 


在 上 面 的 XHTML 网 页 中 ,用户 只 需要 定义 body 标签 的 宽度 、 外 补丁 ， 然 后 即 可 根据 网 页 的 设计 ， 
定义 各 种 布局 元 素 的 高 度 ， 从 而 实现 各 种 上 下 布局 或 上 中 下 布局 。 例 如 ,定义 网 页 的 头 部 高 度 为 100px、 
导航 条 高 度 为 30px、 主 体 部 分 高 度 为 500px、 版 尾部 分 高 度 为 50px 的 代码 如 下 : 




















body { 

width : 1003px ; 

margin : Opx ; 

}// 定 义 网 页 的 body 标签 宽度 和 补 白 属性 
#header { height : 100px ; } 
// 定 义 网 页 头 部 的 高 度 
#navigator{ height : 30px; } 
// 定 义 网 页 导航 条 的 高 度 
#content{ height : 500px; } 
// 定 义 网 页 主题 内 容 部 分 的 高 度 
#footer{ height : S50px; } 
// 定 义 网 页 版 尾部 分 的 高 度 


流动 布局 的 方式 特点 是 结构 简单 、 兼 容 性 好 . 所 有 的 网 页 浏览 器 对 流动 布局 方式 的 支持 都 是 相同 的 ， 
不 需要 用 户 单独 为 某 个 浏览 器 编写 样式 。 然 而 .其 无 法 实现 左右 分 栏 的 样式 .因此 只 能 制作 上 下 布局 或 
上 中 下 布局 ， 具 有 一 定 的 应 用 局 限 性 。 


3.3 绝对 定位 方式 


绝对 定位 布局 的 原理 是 为 每 一 个 网 页 标签 进行 定义 .精确 地 设置 标签 在 页 面 中 的 具体 位 置 和 层 释 次 
序 。 本 节 主 要 讲述 4 个 方面 的 内 容 .分别 是 设置 精确 位 置 、 设 置 层 又 次 序 、 布 局 可 视 化 和 布局 剪 切 。 用 
户 通过 对 本 节 的 学 习 ， 为 后 期 的 网 站 建设 奠定 基础 。 


13.3.1 ”设置 精确 位 置 


设置 网 页 标签 的 精确 位 置 , 可 使 用 CSS 样式 表 的 position 属性 先 定 义 标签 的 性 质 。position 属性 的 作 
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用 是 定义 网 页 标签 的 定位 方式 .其 属性 值 为 4 种 关键 字 ， 如 表 13-4 所 示 。 
表 13-4 position 属性 值 















static 默认 值 ， 无 特殊 定位 ， 苯 循 网 页 布局 标签 原本 的 定位 方式 
absolute 绝对 定位 方式 ， 定 义 网 页 布局 标签 按照 le、top、bottom 和 Tight 4 种 属性 定位 

定义 网 页 布局 标签 按照 left\top\bottom 和 Tight 4 种 属性 定位 ,但 不 记 许 发 生 层 襄 ， 即 包 视 z-index 
relative 


属性 设置 
修改 的 绝对 定位 方式 ， 其 定位 方式 与 absolute 类 似 ， 但 需要 遵循 一 些 规范 ， 例 如 position 属性 
的 定位 是 相对 于 body 标签 的 、fixed 属性 的 定位 则 是 相对 于 html 标签 的 








将 网 页 布局 标签 的 position 属性 值 设 置 为 relative 后 .可 以 通过 设置 左 侧 、 项 部 、 底 部 和 右 侧 4 个 
CSS 属性 ， 定 义 网 页 布局 标签 在 网 页 中 的 偏 移 方式 。 其 结果 与 通过 margin 属性 定义 网 页 布局 标签 的 补 白 
类 似 ， 都 可 以 实现 网 页 布局 的 相对 定位 。 

将 网 页 布局 标签 的 position 属性 定义 为 absolute 之 后 .会 将 其 从 网 页 当前 的 流动 布局 或 浮动 布局 中 脱 
离 出 来 。 此 时 ,用户 必 须 最 少 通过 定义 其 左 人 出、 上方、 右 侧 和 下 方 4 个 针对 body 标签 的 距离 属性 中 的 一 
个 来 实现 其 定位 ， 否 则 position 的 属性 值 将 不 起 作用 (通常 需要 定义 项 部 和 左 侧 两 种 ) 。 例 如 ， 定义 网 页 
布局 标签 距离 网 页 顶部 为 100px、 左 侧 为 30px， 代 码 如 下 所 示 : 












































position : absolute ; 
top : 100ox ; 
left : 30px ; 


position 属性 的 fixed 属性 值 是 一 种 特殊 的 属性 值 。 在 通常 网 页 设计 过 程 中 ， 绝 大 多 数 的 网 页 布局 标 
签 定位 (包括 绝对 定位 ) 都 是 针对 网 页 中 的 body 标签 的 。 而 fixed 属性 值 所 定义 的 网 页 布局 标签 则 是 针 
对 html 标签 的 ， 因 此 可 以 设置 网 页 标签 在 页 面 中 漂浮 。 


13.3.2 ”设置 层 琶 次 序 


使 用 CSS 样式 表 , 除了 可 以 精确 地 设置 网 页 标签 的 位 置 外 . 还 可 以 设置 网 页 标签 的 层 夫 顺序 。 其 需 
要 先 通过 CSS 样式 表 的 position 属性 定义 网 页 标签 的 绝对 定位 ， 然 后 再 使 用 CSS 样式 表 的 z-index 属性 。 

在 重叠 后 , 将 按照 用 户 定义 的 z-index 属性 决定 层 琶 位 置 . 或 自动 按照 其 代码 在 网 页 中 出 现 的 顺序 依 
次 层 琶 显示 。z-index 属性 的 值 为 0 或 任意 正 整数 ， 无 单位 。z-index 的 值 越 大 ， 则 网 页 布局 标签 的 层 亚 顺 
序 越 高 。 例 如 ， 两 个 id 分别 为 divl 和 div2 的 层 ， 其 中 divl 覆盖 在 div2 上 方 ， 则 代码 如 下 所 示 : 






































#divl { 

Position : absolute ; 
一 下 Ge 2 2 

} 
#div2 { 

position : absolute 7 
ndex ET 人 


} 
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13.3.3 布局 可 视 化 


布局 可 视 化 是 指 通过 CSS 样式 表 . 定义 各 种 布局 标签 在 网 页 中 的 显示 情况 。 在 CSS 样式 表 中 . 允许 
用 户 使 用 visibility 属性 .定义 网 页 布局 标签 的 可 视 化 性 能 。 该 属性 有 4 个 关键 字 属 性 值 可 用 . 如 表 13-5 
所 示 。 

















表 13-5 visibility 属性 值 
属性 值 作 用 
visible 默认 值 ， 定 义 网 页 布局 标签 可 见 
hidden 定义 网 页 布局 标签 隐藏 
定义 表格 的 行 或 列 隐藏 ， 但 可 被 脚本 程序 调用 
从 父 网 页 布局 标签 中 继承 可 视 化 方式 





collapse 
inherit 





在 visibility 属性 中 , 用 户 可 以 方便 地 通过 visible 和 hidden 两 个 属性 值 切换 网 页 布局 标签 的 可 视 化 性 
能 ,使 其 显示 或 隐藏 .visibility 属性 与 display 属性 中 的 设置 有 一 定 的 区 别 , 在 设置 display 属性 的 值 为 none 
之 后 , 被 隐藏 的 网 页 布局 标签 往往 不 会 在 网 页 中 再 占据 相应 的 空间 。 而 通过 将 visibility 属性 定义 为 hidden 
的 网 页 布局 标签 则 通常 会 保留 其 占据 的 空间 ， 除 非 将 其 设置 为 绝对 定位 。 


13.3.4 布局 剪 切 


在 CSS 样式 表 中 , 还 提供 了 一 种 可 剪 切 绝对 定位 布局 标签 的 工具 ,可 以 将 用 户 定义 的 矩形 作为 布局 
标签 的 显示 区 域 ， 所 有 位 于 显示 区 域外 的 部 分 都 将 被 剪 切 掉 ， 使 其 无 法 在 网 页 中 显示 。 

在 剪 切 绝对 定位 的 布局 标签 时 ， 需 要 使 用 到 CSS 样式 表 的 clip 属性 ， 其 属性 值 包括 三 种 ， 即 矩形 、 
关键 字 auto 以 及 关键 字 inherit。auto 属性 值 是 clip 属性 的 默认 关键 字 属 性 ， 其 作用 为 不 对 网 页 布局 标签 
进行 任何 剪 切 操作 ， 或 剪 切 的 矩形 与 网 页 布局 标签 的 大 小 和 位 置 相同 。 

矩形 属性 值 与 颜色 、URL 类 似 , 都 是 一 种 特殊 的 属性 值 对 象 。 在 定义 矩形 属性 值 时 ,需要 使 用 rectO 
方法 ， 同 时 将 矩形 与 网 页 的 四 条 边 之 间 的 距离 作为 参数 ， 填 写 到 rect0 方 法 中 。 例 如 ， 定 义 一 个 距离 网 页 
左 侧 20px、 顶 部 45px、 右 侧 30px、 底 部 26px 的 矩形 ， 代 码 如 下 : 
































rect (20px 45px 30px 26px) 
用 户 可 以 方便 地 将 上 面 代码 的 矩形 应 用 到 clip 属性 中 ， 以 对 绝对 定位 的 网 页 布局 标签 进行 剪 切 操作 
代码 : 


position : absolute ; 
clip : rect(20px 45px 30px 26px) ; 


国 3. 由 浮动 定位 方式 


任何 元 素 在 默认 情况 下 是 不 能 够 浮动 的 .但 都 可 以 用 CSS 定义 为 浮动 . 如 div、list、p、table 以 及 
img 等 元 素 。 通 过 CSS 的 float 属性 可 以 定义 元 素 向 左 、 向 右 浮动 或 取消 浮动 ， 其 值 可 以 为 inherit、left 
( 左 浮动 )、right ( 右 浮动 ) 和 none (取消 浮动 ) ， 代 码 如 下 : 
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div{ 
float:left; /* 定 义 元 素 向 左 浮动 */ 
float:right; /* 定 义 元 素 向 右 浮动 */ 
float:none; /* 取 消 元 素 浮动 */ 

} 


任何 定义 为 float 的 元 素 都 会 自动 被 设置 为 一 个 块 状元 素 显示 .相当 于 被 定义 了 “display:block;” 
明 。 这 样 就 可 以 为 浮动 元 素 定 义 width 和 height 属性 .即使 是 内 联 显示 元 素 . 代码 如 下 : 


让 


span{ 
width:400px; 
height:150px; 
border:solid 2px #C607 
/* 定 义 span 元 素 的 宽度 、 高 度 和 边框 样式 */ 


} 
#float{ 

float:right; 

/* 定 义 第 2 个 内 联 元 素 span 浮动 显示 */ 
} 


效果 如 图 13-16 所 示 。 




















引 内 联 元 素 相对 显示 





内 联 元 素 得 动 显示 


























图 13-16 ”浮动 定位 方式 





与 普通 元 素 一 样 ， 浮 动 元 素 始终 位 于 包含 元 素 内 ， 不 会 游离 在 外 ， 或 破坏 元 素 包含 关系 。 例 如 ,在 
上 面 示例 的 基础 上 再 添加 一 个 包含 元 素 div， 这 样 第 2 个 span 元 素 将 会 靠近 包含 元 素 div 的 右边 框 浮动 . 
而 不 再 是 body 元 素 的 右边 框 .代码 如 下 : 
CSS 样式 代码 : 
#containt{ 
width:520px; 
height:380px; 
padding:20px; 
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eee 





/* 定 义 元 素 的 填充 为 20px*/ 
border:double 4px #999; 


} 
XHTML 结构 代码 : 
<div id="contain"> 
<span id="inline"> 内 联 元 素 相对 显示 
<img src="bg.jpg”alt=" 流 动 的 图 像 "” /> 


</span> 
<span id="float"> 内 联 元 素 浮动 显示 </span> 


</div> 


效果 如 图 13-17 所 示 。 














2 
| 
| 2 
| 2 2 
内 联 元 素 相对 显示 之 A 

内 联 元 素 社 动 显示 
































图 13-17 浮动 定位 方式 


虽然 浮动 元 素 能 够 随 文档 流动 ， 但 浮动 定位 与 相对 定位 依然 存在 本 质 区 别 。 浮 动 元 素 后 面 的 块 状元 
素 与 内 联 元 素 都 能 够 以 流 的 形式 环绕 浮动 元 素 左右 ， 甚 至 与 上 面 的 文本 流连 成 一 体 ， 代 码 如 下 ; 


CSS 样式 代码 : 

span { 
width:500px; 
height:150px; 
border:solid 2px #C60; 

} 

#float { 
float:left; 

/* 定 义 元 素 向 左 浮动 显示 */ 

background-color:#6C9 


} 
XHTML 结构 代码 : 
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浮动 元 素 不 会 强迫 前 面 的 文本 流 或 内 联 元 素 环绕 其 周围 流动 
<span id="inline"> 内 联 元 素 相对 显示 

<img src="bg.jpg”alt=" 流 动 的 图 像 " /> 
</span> 
<span id="float"> 内 联 元 素 浮动 显示 </span> 
<span id="inline2"> 内 联 元 素 相对 显示 

<img src="bg.jpg"” alt=" 流 动 的 图 像 ” /> 
</span> 


浮动 元 素 不 会 强迫 前 面 的 文本 流 或 内 联 元 素 环 绕 其 周 国 流 动 。 


浮动 的 自由 性 也 给 布局 带 来 很 多 问题 . CSS 为 此 增加 了 clear 属性 . 它 能 够 在 一 定 程度 上 控制 浮动 布 
局 中 出 现 的 混乱 现象 。clear 属性 可 设置 为 如 表 13-6 所 示 的 4 个 值 ， 效 果 如 图 13-18 所 示 。 

EE LPPPTPPP :FHP FPPPR LTPP PPR PER ER FPP ,PP TP APPR 
| 浮动 元 素 不 会 强迫 前 面 的 文本 流 或 内 联 元 素 环 统 其 周转 流动 。 内 联 元 素 相对 显示 
























































图 13-18 浮动 定位 方式 


表 13-6 clear 属 性 值 











清除 左边 的 浮动 对 象 ， 如 果 左 边 存在 浮动 对 象 ， 则 当前 元 素 会 在 浮动 对 象 底下 显示 
清除 右边 的 浮动 对 象 ， 如 果 右 边 存 在 浮动 对 象 ， 则 当前 元 素 会 在 浮动 对 象 底下 显示 

清除 左右 两 边 的 浮动 对 象 ， 不 管 哪 边 存在 浮动 对 象 ， 当 前 元 素 都 会 在 浮动 对 象 底 下 显示 
默认 值 ， 允 许 两 边 都 可 以 有 浮动 对 象 ， 当 前 浮动 元 素 不 会 换行 显示 


13.5 


本 章 概要 性 地 介绍 了 CSS 盒 模型 、 流 动 定位 方式 、 绝 对 定位 方式 、 浮 动 定位 方式 .为 本 书后 续 的 学 
习 打下 坚实 的 基础 。 本 章 主要 讲述 如 何 利用 Web 2.0 布局 方式 制作 吸引 人 的 网 站 的 一 些 方 法 和 相关 技术 . 
接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进行 实践 。 


13.5.1 实战 : 制作 家 居 网 页 
网 页 的 色调 与 布局 是 决定 网 站 美观 的 主要 因素 。 在 互联 网 上 ， 家 居 网 站 一 般 都 以 暖色 调 为 主 色调 布 
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局 网 页 ， 在 视觉 上 给 人 温暖 、 舒 适 和 自然 的 感觉 。 本 例 使 用 绝对 和 浮动 定位 一 个 以 棕 黄 色 为 主 色调 的 家 
居 网 页 ， 主 要 练习 CSS 浮动 定位 .绝对 定位 .无 序列 表 ul、1i 标签 的 应 用 . CSS、float 属性 的 应 用 ， 如 
图 13-19 所 示 。 





图 13-19 制作 家 居 网 页 


STEP|01 新 建 空白 文档 ， 在 【属性 】 面 板 中 打开 【页 面 属性 】 对 话 框 .在 各 个 选项 卡 中 设置 字体 大 小 、 
文本 颜色 、 背 景 颜色 和 标题 等 参数 ， 如 图 13-20 一 图 13-24 所 示 。 
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图 13-20 【新 建文 档 】 对 话 杠 
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图 13-21 【属性 〗】 面 板 
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图 13-22 【页 面 属性 】 对 话 框 1 


赚 撞 (CSS) 
侧 按 字体 0): (同体 >。 > 
大 小 5); 四 站 ~ 
树 接 颜色 0); 国 | aa 变 执 图像 树 接 m): 园 | #690 
已 访问 出 接 0): 国 | #a 活动 树 挤 0); 国 | 3 
下 车 样式 0) ，| 公 在 庄 损 图 像 时 量 示 下 基线 4 






































图 13-23 【页 面 属性 】 对 话 框 2 
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站 点 文件 夹 : 





设计 与 网 站 建设 源 文件 \13\ 制 作家 居 网 页 \ 
C: Vsers\SY\Doconents\ 未 命名 站 点 2\ 


























图 13-24 【页 面 属性 】〗】 对 话 框 3 


第 13 章 Web 2.0 布局 方式 





STEP|02 单 击 Div 按钮 .在 弹出 的 【插入 Div】 对 话 框 中 设置 ID 为 container。 然 后 . 单 击 【 新 建 CSS 
规则 】, 打开 【新 建 CSS 规则 】 对 话 框 . 然后 单 击 【 确 定 】 按 钮 。 最 后 打开 【#container 的 CSS 规则 定义 】 
对 话 框 .并 设置 方 框 和 定位 参数 .如 图 13-25 一 图 13-28 所 示 。 





























图 13-25 【插入 Div】 对 话 框 
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图 13-26 【新 建 CSS 规则 】〗 对 话 框 
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图 13-27 【#container 的 CSS 规则 定义 】〗 对 话 框 1 
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分 类 定位 
Position(F) : sbsolute = Visibility (0) : - 
Widatho) : 850 vv [px z= Z-Index (2) : = 
Height0) : 500 vv [px Overflow (F) ; ~ 
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图 13-28 【〖#container 的 CSS 规则 定义 】 对 话 框 2 


STEP|03 在 ID 为 container 的 层 中 ,执行 【插入 】|【 布 局 对 象 】|AP Div 命令 ， 在 【属性 】 面 板 中 更 改 
其 【CSS-P 元 素 】 为 nav 并 编辑 其 CSS 规则 。 然 后 在 【属性 】 面 板 中 单 击 【 项 目 列表 】 按 钮 国 ， 在 人 D 
为 nav 的 层 中 插入 一 个 项 目 列表 ， 并 设置 其 列表 的 CSS 样式 ， 如 图 13-29 一 图 13-31 所 示 。 
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图 13-29 【属性 】 面 板 


#container #nav ul Li { 
display: inline; 
padding-Left: 5px; 





图 13-30 CSS 样式 代码 1 图 13-31 CSS 样式 代码 2 


STEP|04 使 用 相同 的 方法 .在 ID 为 container 的 层 中 插入 一 个 AP Div. 修改 ID 为 main 并 定义 其 CSS 
样式 。 然 后 ， 在 该 层 中 插入 一 个 项 目 列表 并 定义 其 CSS 样式 .如 图 13-32 和 图 13-33 所 示 。 

STEP|05 使 用 相同 的 方法 . 在 ID 为 container 的 层 中 插入 一 个 AP Div. 修改 其 ID 为 mrtit 并 定义 其 CSS 
样式 ， 如 图 13-34 所 示 。 
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eee 








#main { 
position:absolute; 
es 了 
SE 这 position:absolute; 
和 width:629px; 
a a height:23px; 
Ee le Ss z-index:2; 
a xs left: 196px; 
top: 72px; 
; } 
图 13-32 CSS 样式 代码 图 13-33 页 面 效 果 图 13-34 CSS 样式 代码 





STEP|06 再 插入 一 个 AP Div， 修 改 其 ID 为 mainright 并 定义 其 CSS 样式 。 然 后 ， 单 击 【属性 】 面 板 中 
的 【项 目 列表 】 按 钮 蜀 ， 在 该 层 插入 一 个 图 像 的 列表 。 分 别 新 建 “#pmainright ul” 和“#mainright ul li” 
规则 ， 定 义 项 目 列表 的 CSS 样式 ， 如 图 13-35 和 图 13-36 所 示 。 

STEP|07 然后 ， 在 ZD 为 container 的 层 中 继续 插入 一 个 AP Div, 修改 其 ID 为 footer， 定 义 其 CSS 样式 
并 输入 文本 ， 如 图 13-37 和 图 13-38 所 示 。 





















#mainright { #container #mainright ul { 
position:absolute; margin: Opx; #footer { 
42pX3 padding: epx; position:absolute; 
X } width:513px; 
. height:22px; 
#container #mainright ul li { z-index 
display: inline; left: 
padding: 2px; top: 505px; 
} } } 





图 13-38 页 面 效果 


13.5.2 ”实战 : 制作 商品 列表 


使 用 CSS 样式 表 的 浮动 布局 , 不 仅 可 以 实现 页 面 的 布局 . 还 可 以 为 网 页 中 各 种 块 状 标签 定位 。 本 例 
使 用 CSS 样式 表 的 float 标签 .制作 一 个 简单 的 页 面 显 示 各 种 商品 ,主要 练习 定义 容器 大 小 和 位 置 、 定 义 
容器 边框 样式 、 定 义 列表 样式 ， 如 图 13-39 所 示 。 











272 





网 页 设计 与 网 站 建设 自学 经 典 


wei levebags.cem 


(各 /爱心 织 绕 。 爱 避 文 化 发 展 有 限 公司 
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图 13-39 制作 商品 列表 





STEP|01 打开 素材 页 面 “index.html ”将 光标 置 于 ID 为 content 的 Div 层 中 , 单 击 【 插 入 】 面板 中 HTML 
选项 中 的 Div 按钮 ， 分 别 创建 ID 为 leftmain、rightmain 的 Div 层 . 并 设置 其 CSS 样式 属性 ， 如 图 13-40 








和 图 13-41 所 示 。 











STEP102 将 光标 置 于 ID 为 leftmain 的 Div 层 中 , 单 击 【 插 入 Div 标签 ] 按钮 , 分 别 创建 ID 为 menutTitle、 




















menu 的 Div 层 ， 并 设置 其 CSS 样式 属性 ， 如 图 13-42 和 图 13-43 所 示 。 





























mn | 
Ee 
中 口 口 名师 
C= 局 
im 
+ 属性 width 
症 口 四 加 器 height 
市 局 margi 
width 198 px 
height 440 px 
float : 辆 对 加 Ee DB 
操 EE 和 pe i i 六 oy 
width 3 px 门 边框 
style : solid 一 - 
a : 国 #cce berder : ipxsold#CCC 
il 口 Wenk 
羡 表 是 width 1 px 
二 se id 
backoroumt :四 sppp ee a 
图 13-40 CSS 样式 属性 1 图 13-41 CSS 样式 属性 2 


STEPI03 单 击 【 属 性 】 面 板 中 的 【项 目 列表 】 按 钮 . 出现 项 目 列表 符号 . 








列表 符号 ， 在 项 目 列表 符号 后 再 输入 文本 ， 以 此 类 推 . 如 图 13-44 所 示 。 
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图 13-42 CSS 样式 属性 1 


按 Enter 键 .出 现下 一 个 项 目 
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STEP|04 在 标签 栏 中 选择 岂 标签 ， 并 设置 其 CSS 样式 属性 ， 然 后 按照 相同 的 方法 在 标签 栏 中 再 选择 下 
标签 ,并 设置 其 CSS 样式 ， 然 后 ， 将 光标 置 于 文本 “礼品 袋 ”之 前 ， 如 图 13-45 和 图 13-46 所 示 。 
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而 男 口 回 EE 
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图 13-43 CSS 样式 属性 2 图 13-44 页 面 效果 ”图 13-45 CSS 样式 属性 1 图 13-46 CSS 样式 属性 2 


STEPI05 单 击 【 插 入 】 面 板 中 的 【图 像 】 按 钮 ， 插 入 图 像 “ico.gif”， 按 照相 同 的 方法 依次 在 文本 前 插入 
图 像 ， 然后 选择 文本 ,在 【属性 】 检 查 器 中 设置 【链接 】 为 “javascriptvoidnulD;”， 如 图 13-47 和 图 13-48 
所 示 。 
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图 13-47 【选择 图 像 源 文件 】 对 话 框 
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图 13-48 【属性 】 面 板 








274 


网 页 设计 与 网 站 建设 自学 经 典 





STEP|06 按照 相同 的 方法 设置 其 他 文本 链接 : 在 标签 栏 选择 a 标签 . 并 设置 其 CSS 样式 属性 , 如 图 13-49 


所 示 。 


STEP|07 然后 将 光标 置 于 ID 为 rightmain 的 Div 层 中 ， 单 击 Div 按钮 。 创 建功 为 newsTitle 的 Div 层 ， 


并 设置 其 CSS 样式 , 将 光标 置 于 该 层 H 


的 Div， 并 设置 其 CSS 样式 属性 . 


























scontent leftmain zmenu yl li a 
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中国 口 EE 
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图 13-49 CSS 样式 属性 


STEP|08 将 光标 置 于 类 名 称 为 rows 的 Div 层 中 ,分 别 创建 类 名 称 为 pic、picText 的 Div 








如 图 13-50 和 图 13-51 所 示 。 
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height 
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: px 
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background- 
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图 13-50 ID 为 newsTitle 的 Div 


h, 插入 图 像 “Main_news_top.gif”。 在 该 层 下 方 . 创建 类 名 称 为 rows 











E 3 
而 加 [CE 
出 市 局 
width 3 147 px 
height : 172 px 
margin : 10px8px 
10 px 
Bpx (DO) 8 px 
10 px 
float : 圈 妆 旺 
图 13-51 类 名 称 为 ITows 的 Div 

















屋 ， 并 设置 其 





CSS 样式 属性 ， 将 光标 置 于 pic 层 中 ， 插 入 图 像 “picl,jpg ;在 名 为 picText 的 Div 层 中 插入 图 像 及 输入 


文本 ， 如 图 13-52 一 图 13-54 所 示 。 
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图 13-52 pic 
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图 13-53 picText 

















图 13-54 页 面 效果 


STEP|09 单 击 Div 按钮 ,在 弹出 的 【插入 Div】 对 话 框 中 选择 Class 为 rows 的 Div 层 , 按照 相同 的 方法 
在 层 中 嵌 套 类 名 称 为 pic.picText 的 Div 层 .在 相应 的 Div 层 中 插入 图 像 并 











f 输 入 文本 .如 图 











13-55 和 图 13-56 





所 示 。 








四 礼品 袋 











图 13-55 【插入 Div】〗 对 话 框 图 13-56 页 面 效 果 


STEP|10 按照 相同 的 方法 创建 其 他 Div 层 , 然后 在 相应 的 Div 层 中 插入 图 像 并 输入 文本 ， 即 可 完成 商品 
列表 的 制作 ， 如 图 13-57 所 示 。 








图 13-57 页 面 效果 





页 交互 应 用 


本 亡 织 镶 。 爱 文 化 肥 展 有限 会 司 


为 了 使 网 页 具有 较 强 的 吸引 力 . 设计 者 在 制作 网 页 时 通常 会 添加 各 种 特效 。 网 页 中 的 特效 一 般 是 由 
JavaScript 脚本 代码 完成 的 , 对 于 没有 任何 编程 基础 的 设计 者 而 言 . 可 以 使 用 Dreamweaver 中 内 置 的 行为 。 
行为 丰富 了 网 页 的 交互 功能 ， 它 允许 访问 者 通过 与 页 面 之 间 的 交互 行为 来 改变 网 页 内 容 ,或 者 让 网 页 执 
行 某 个 动作 。 

本 章 主要 介绍 网 页 交互 应 用 ， 内 容 包括 网 页 行为 概述 、 网 页 交互 步骤 、 设 置 文本 和 综合 实战 。 通 过 
本 章 的 学 习 ， 我们 能 够 在 网 页 中 添加 各 种 行为 以 实现 与 访问 者 的 交互 功能 。 











网 页 行为 概述 


行为 是 用 来 动态 响应 用 户 操作 、 改 变 当前 页 面 效果 或 者 是 执行 特定 任务 的 一 种 方法 ， 可 以 使 访问 者 
与 网 页 之 间 产 生 一 种 交互 。 行 为 是 由 某 个 事件 和 该 事件 所 触发 的 动作 组 合 而 成 的 。 任 何 一 个 动作 都 需要 
一 个 事件 激活 ， 两 者 相辅相成 。 

事件 是 触发 动态 效果 的 条 件 。 例 如 ， 当 访问 者 将 鼠标 指针 移动 到 某 个 链接 上 时 ， 浏 览 器 将 为 该 链接 
生成 一 个 onMouseOver 事件 。 

动作 是 一 段 预先 编写 的 JavaScript 代码 .可 用 于 执行 以 下 的 任务 : 打开 浏览 器 窗口 、 显 示 或 隐藏 AP 
元 素 、 交 换 图 像 、 弹 出 信息 等 。Dreamweaver 所 提供 的 动作 提供 了 最 大 程度 的 跨 浏览 器 兼容 性 。 

行为 可 以 被 添加 到 各 种 网 页 元 素 上 , 如 图 像 、 文字 、 多 媒体 文件 等 . 也 可 以 被 添加 到 HTML 标签 中 。 
当 行 为 添加 到 某 个 网 页 元 素 后 ,每 当 该 元 素 的 某 个 事件 发 生 时 ， 行 为 即 会 调用 与 这 一 事件 关联 的 动作 
(JavaScript 代码 ) 。 

例如 ,将 “弹出 消息 ”动作 附加 到 一 个 链接 上 ， 并 指定 它 将 由 onMouseOver 事件 触发 ， 则 只 要 将 指 
针 放 在 该 链接 上 ， 就 会 弹出 消息 。 在 Dreamweaver 中 .用 户 在 【行为 】 面 板 中 首先 指定 一 个 动作 ， 然 后 
再 指定 触发 该 动作 的 事件 ， 即 可 将 行为 添加 到 网 页 文档 中 。 
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网 站 就 是 由 网 页 组 成 的 ， 如 果 只 有 域名 和 虚拟 主机 而 没有 制作 任何 网 页 的 话 ， 客 户 仍旧 无 法 访问 网 
站 。 本 节 主 要 讲述 5 方面 的 内 容 . 分 别 是 在 网 页 中 交换 图 像 . 弹出 信息 和 打开 浏览 器 窗口 、 拖 动 AP 元 素 、 
改变 属性 、 显 示 - 隐 藏 元 素 。 通 过 本 章 的 学 习 ， 我 们 可 以 为 后 面 的 网 站 建设 奠定 基础 。 


14.2.1 交换 图 像 


交换 图 像 行为 是 通过 更 改 <img> 标 签 的 src 属性 将 一 个 图 像 和 另 一 个 图 像 进行 交换 , 或 者 交换 多 个 图 
像 。 如 果 要 添加 “交换 图 像 ” 行 为 ， 首 先 要 在 文档 中 插 
入 一 个 图 像 ， 然 后 选择 该 图 像 ， 单 击 【 行 为 】 面 板 中 的 
【添加 行为 】 按 钮 ， 执 行 【交换 图 像 】 命 令 ， 在 弹出 的 
对 话 框 中 选择 另外 一 张 要 换 入 的 图 像 。 

在 【交换 图 像 】 对 话 框 中 复 选 框 选项 介绍 如 下 所 示 。 

(1) 启用 【预先 载 入 图 像 】 复 选 框 ,可 以 在 加 载 页 
面 时 对 新 图 像 进行 缓存 , 这 样 可 以 防止 当 图 像 应 该 出 现 
时 由 于 下 载 而 导致 延迟 。 

(2) 启用 【鼠标 滑 开 时 恢复 图 像 】 复 选 框 ， 可 以 在 
鼠标 指针 高 开 图 像 时 ， 恢 复 到 以 前 的 图 像 源 ， 即 打开 浏 
览 器 时 的 初始 化 图 像 。 设 置 完成 后 预览 页 面 ， 可 以 发 现 
当 光 标 指针 经 过 浏览 器 中 的 源 图 像 时 ， 该 图 像 即 会 转换 
为 另外 一 张 图 像 : 当 光标 指针 离开 图 像 时 ， 则 又 恢复 为 
源 图 像 ， 如 图 14-1 所 示 。 图 14-1 ”交换 图 像 
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网 ] 设 


14.2.2 弹出 信息 和 打开 浏览 器 窗口 


弹出 信息 行为 用 于 弹出 一 个 显示 预 设 信息 的 JavaScript 警告 框 。 由 于 该 警告 框 中 只 有 一 个 【确定 】 
按钮 ， 所 以 使 用 此 行为 可 以 为 用 户 提供 信息 . 但 不 能 提供 选择 操作 。 选 择 文档 中 的 某 一 对 象 ， 单 击 【 行 
为 】 面 板 中 的 【添加 行为 】 按 钮 Ej， 执 行 【弹出 信息 】 命 令 ， 然 后 在 弹出 的 对 话 框 中 输入 文字 信息 。 

设置 完成 后 预览 页 面 ， 单 击 浏览 器 中 的 图 像 时 ,会 弹出 一 个 包含 预 设 信息 的 JavaScript 警告 框 。 使 

用 【打开 浏览 嚣 窗口】 行为 可 以 在 一 个 新 的 窗口 中 打开 页 面 , 同时 ,还 可 以 指定 该 新 窗口 的 属性 、 特 性 
和 名 称 。 

选择 文档 中 的 某 一 对 象 ， 在 【行为 】 面 板 中 的 【添加 行为 】 菜 单 中 执行 【打开 浏览 器 窗口 】 命 令 。 
然后 , 在 弹出 的 对 话 框 中 选择 或 输入 要 打开 的 URL. 并 设置 新 窗口 的 属性 。[ 打 开 浏 览 器 窗口 】 对 话 框 中 
有 5 个 选项 ， 其 名 称 及 功能 介绍 如 表 14-1 所 示 。 设 置 完成 后 预览 页 面 ， 单 击 图 像 后 .会 在 一 个 新 的 浏览 
器 窗口 中 打开 指定 的 网 页 “image2.html 。 


表 14-1 【打开 浏览 器 窗口 】 对 话 框 中 选项 的 名 称 与 功能 


















































选项 名 称 功 能 
a 设置 弹出 浏览 器 窗口 的 URL 地 址 ， 可 以 是 相对 地 址 ， 也 可 以 是 绝 
对 地 址 
窗口 宽度 以 像素 为 单位 设置 弹出 浏览 器 窗口 的 宽度 
口 高 度 以 像素 为 单位 设置 弹出 浏览 器 窗口 的 高 度 
指定 弹出 浏览 器 窗口 是 否 显示 前 进 、 后 退 等 导航 工具 栏 
指定 弹出 浏览 器 窗口 是 否 显示 文件 、 编 辑 、 查 看 等 菜单 条 
ps 指定 弹出 浏览 器 窗口 是 否 显示 地 址 工具 栏 
| 指定 弹出 浏览 器 窗口 是 否 使 用 滚动 条 
指定 弹出 浏览 器 窗口 是 否 显示 状态 栏 
指定 弹出 浏览 器 串口 是 否 万 许 调整 大 小 
窗口 名 称 设置 弹出 浏览 器 窗口 的 标题 名 称 


14.2.3” 拖 动 AP 元 素 


拖 动 AP 元 素 行 为 可 以 让 访问 者 拖 动 绝对 定位 的 AP 元 素 . 通过 该 行为 可 以 创建 拼图 游戏 、 滑 块 控件 
和 其 他 可 移动 的 界面 元 素 。 在 添加 “ 拖 动 AP 元 素 ” 行 为 之 前 ， 首先 要 在 文档 中 插入 AP 元 素 。 然 后 , 使 
用 鼠标 单 击 文档 中 的 任意 位 置 ， 使 焦点 离开 AP 元 素 ， 这样 【行为 】 面 板 中 的 【 拖 动 AP 元 素 】 命 令 才 可 使 用 。 

在 【行为 】 面 板 的 【添加 行为 】 菜 单 中 执行 【 拖 动 AP 元 素 】 命 令 , 即 可 打开 【 拖 动 AP 元 素 】 对 话 

该 对 话 框 默 认 显示 为 【基本 】 面 板 . 可 以 设置 AP 元 素 、 是 否 限制 拖 动 范围 ， 以 及 靠 齐 距离 等 ; 如 果 
ea 可 以 单 击 对 话 框 上 面 的 【高 级 】 选 项 卡 切换 至 【高 级 】 面 板 。【 基 本 】 面 板 中 
的 各 个 选项 名 称 及 功能 介绍 如 表 14-2 所 示 。 


表 14-2 【基本 】 面 板 中 的 各 选项 及 作用 
选项 名 称 功 能 
AP 元 素 ”| 在 下 拉 列 表 中 选择 要 拖 动 的 AP 元 素 
移 | 不 限制 | 选择 该 进项 ， 则 AP 元 素 不 会 被 限制 在 一 定 范围 内 ， 通 常用 于 拼图 或 拖 动 、 放 下 的 游戏 内 容 
动 | 限制 。 | 将 AP 元 素 限制 在 一 定 的 范围 之 内 ， 通 常用 于 滑 块 控制 或 可 移动 的 各 种 布景 
































靠 齐 距离 


到 了 目的 点 并 自动 拖 放 到 指定 目的 点 上 





【高 级 】 面 板 中 的 各 个 选项 名 称 及 功能 介绍 如 表 14-3 所 示 。 
表 14-3 【高 级 】 面 板 中 的 各 选项 及 作用 








选项 名 称 功 能 

该 选项 用 于 设置 AP 元 素 中 可 被 用 于 拖 动 的 区 域 。 当 选择 【整个 元 素 】〗 则 拖 动 的 控 

拖 动 控制 点 制 点 可 以 是 整个 AP 元 素 ; 当选 择 【元 素 内 的 区 域 】 并 在 其 后 设置 坐标 ， 则 拖 动 的 
控制 点 仅 是 AP 元 素 指定 范围 内 的 部 分 

拖 动 时 选择 【将 元 素 置 于 顶层 】 命 令 则 在 拖 动 时 ，AP 元 素 在 网 页 所 有 AP 元 素 的 顶层 
选择 【 留 在 最 上 方 】 则 拖 动 后 的 AP 元 素 保持 其 顶层 位 置 ， 如 选择 【恢复 Z 轴 】， 

然后 则 该 元 素 恢复 回 原 层 登 位 置 。 该 下 拉 列 表 仅 在 【 拖 动 时 】〗】 被 设置 为 【将 元 素 置 于 
顶层 】 时 有 效 

呼叫 JavaScript 在 访问 者 拖 动 AP 元 素 时 执行 一 段 JavaScript 代码 

放下 时 : 呼叫 JavaScript | 在 访问 者 完成 拖 动 AP 元 素 后 执行 一 段 JavaScript 代码 

本 i 则 只 有 在 访问 者 拖 动 完成 AP 元 素 并 将 其 靠 齐 后 才 会 执行 JavaScript 








设置 完成 后 预览 页 面 ， 单 击 并 拖 动 AP 元 素 中 的 图 像 ， 可 以 发 现 该 图 像 能 够 被 移动 到 任意 位 置 。 当 
释放 鼠标 ， 该 图 像 将 停留 在 新 位 置 上 ， 如 图 14-2 和 图 14-3 所 示 。 
































图 14-2 拖 动 AP 元素 图 14-3 拖 动 AP 元 素 


14.2.4 改变 属性 


“改变 属性 ”行为 用 来 动态 地 更 改 对 象 某 个 属性 的 值 . 一 般 来 说 ,这 个 行为 能 够 改变 的 属性 决定 于 附 
加 动作 的 对 象 和 浏览 器 的 类 型 。 

选择 文档 中 的 某 一 对 象 (如 AP 元 素 ) ， 在 【行为 】 面 板 的 【添加 行为 】 菜 单 中 执行 【改变 属性 】 命 
令 , 打开 【改变 属性 】 对 话 框 。 在 该 对 话 框 中 可 以 选择 要 更 改 属性 的 元 素 、 更 改 属性 的 名 称 以 及 属性 的 
新 值 。 【改变 属性 】 对 话 框 中 的 各 个 选项 名 称 及 功能 介绍 如 表 14-4 所 示 。 
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表 14-4 【改变 属性 】 对 话 框 中 各 选项 名 称 及 功能 





选项 名 称 
元 素 类 型 


用 于 定义 要 更 改 属 性 的 网 页 元 素 类 型 ,允许 用 户 从 下 拉 列 表 中 选择 当前 网 页 中 存在 的 各 种 网 
页 元 素 

元 素 D | 用 于 定义 要 更 改 属性 的 网 页 元 素 ， 克 许 用 户 从 下 拉 列 表 中 选择 已 确定 类 型 的 网 页 元 素 ID 

属 | 选择 允许 用 户 从 下 拉 列 表 中 选择 需要 更 改 属性 的 网 页 元 素 的 属性 名 称 

性 | 输入 允许 用 户 自行 输入 需要 更 改 属 性 的 网 页 元 素 的 属性 名 称 

新 的 值 为 选择 的 属性 设置 新 的 属性 值 

















在 【改变 属性 】 对 话 框 中 ,选择 【元 素 类 型 】 为 DIV， 即 要 更 改 属性 的 元 素 类 型 为 Div; 选择 【元 
素 ID】 为 div "apDiv1"， 即 要 更 改 属 性 的 div 元 素 ZJD 为 apDiv1; 在 【属性 】 选 项 中 的 【选择 】 下 拉 列 表 
中 选择 zIndex， 即 更 改元 素 的 属性 为 层 夫 顺序 ,在 【新 的 值 】 文 本 框 中 输入 3， 即 设置 元 素 的 层 释 顺序 为 
3。 设 置 完成 后 预览 效果 ， 当 焦点 位 于 apDiv1l 元 素 上 时 (如 单 击 该 AP 元 素 )， 将 执行 动作 改变 其 层 合 顺 
序 ,使 其 显示 在 另 一 元 素 的 上 面 。 


14.2.5 ”显示 -隐藏 元 素 


【显示 -隐藏 元 素 】 行 为 可 显示 、 隐 藏 或 恢复 一 个 
或 多 个 网 页 元 素 的 默认 可 见 性 。 此 行为 用 于 在 用 户 与 
页 面 进行 交互 时 显示 信息 。 在 添加 【显示 -隐藏 元 素 】 
行为 之 前 ， 首 先 要 在 文档 中 创建 AP 元 素 。 该 AP 元 
素 的 位 置 就 是 元 素 显 示 时 的 位 置 ， 如 图 14-4 所 示 。 

如 果 想 要 在 打开 页 面 时 默认 隐藏 该 AP 元 素 . 可 
以 用 鼠标 单 击 文档 的 任意 位 置 . 在 【行为 ] 面板 的 【 添 
加 行为 】 菜 单 中 执行 【显示 - 隐 茂 元素】 命令 。 然 后 ， 
在 弹出 的 对 话 框 中 选择 div "apDiv1" 选 项 . 并 单 击 【 隐 
藏 】 按 钮 ,这样 可 以 使 其 在 页 面 加 载 时 ( 即 onLoad 
事件 ) 隐藏 。 为 了 使 光标 经 过 图 像 时 可 以 显示 文字 介 图 14-4 显示 -隐藏 元 素 
绍 ， 可 以 在 图 像 上 添加 onMouseOver 事件 来 执行 显 
示 AP 元 素 的 动作 。 

选择 文档 中 的 图 像 ， 在 【显示 -隐藏 元 素 】 对 话 框 中 选择 div "apDiv1" 选 项 ， 并 单 击 【 显 示 】 按 钮 。 
然后 , 在 【行为 】 面 板 中 将 onClick 事件 更 改 为 onMouseOver 事件 ,使 光标 经 过 图 像 时 执行 显示 AP 元 素 
动作 。 设置 完成 后 预览 效果 .可 以 发 现 AP 元 素 及 其 中 的 文字 介绍 , 默认 不 显示 . 但 如 果 将 光标 指针 移动 
到 图 像 上 时 ，AP 元 素 及 其 内 容 则 自动 显示 出 来 。 


国 .3 设置 文本 


【设置 容器 的 文本 】 行 为 将 页 面 上 的 现 有 容器 (可 以 包含 文本 或 其 他 元 素 的 任何 元 素 ) 的 内 容 和 格式 
替换 为 指定 的 内 容 。 选 择 文档 中 的 一 个 容器 (如 div 元 素 ) .在 【行为 】 面 板 的 【添加 行为 】 菜 单 中 执行 
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【设置 容器 的 文本 】 命 令 。 本 节 主 要 讲述 两 个 方面 的 内 容 . 分 别 是 设置 文本 域 文字 、 设 置 框架 文本 。 用 户 
通过 对 本 节 的 学 习 ， 为 后 期 的 网 站 建设 奠定 基础 。 


14.3.1 设置 文本 域 文字 


在 弹出 的 对 话 框 中 选择 目标 容器 .并 在 【新 建 HTML]】 文本 框 中 输入 文本 内 容 。 设 置 完 成 后 预览 效 
果 ， 当 焦点 位 于 文档 中 的 容器 时 (如 单 击 该 div 元 素 ) ， 则 容器 中 的 图 像 替 换 为 预 设 的 文字 内 容 ， 并 且 应 
用 了 HTML 标签 样式 ， 如 图 14-5 所 示 。 
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图 14-5 设置 文本 


“设置 文本 域 文字 ”行为 可 以 将 指定 的 内 容 蔡 换 为 表单 文本 域 的 内 容 。 在 表单 的 文本 域 中 可 以 为 文本 
域 指定 初始 值 ， 初 始 值 也 可 以 为 空 。 

在 使 用 “设置 文本 域 文字 ”行为 之 前 ， 首 先 要 在 文档 中 插入 文本 字段 或 文本 区 域 。 单 击 【 插 入 】 面 
板 【 布 局 】 选 项 卡 中 的 【文本 字段 】 或 【文本 区 域 】 按 钮 ， 在 弹出 的 对 话 框 中 设置 ID。 使 用 鼠标 单 击 文 
档 的 任意 位 置 ， 在 【行为 】〗】 面 板 的 【添加 行为 】 菜 单 中 执行 【设置 文本 域 文字 】 命 令 。 然 后 ， 在 弹出 的 
对 话 框 中 选择 目标 文本 域 ， 并 在 【新 建文 本 】 文 本 框 中 输入 所 要 显示 的 文本 内 容 。 设 置 完 成 后 预览 效果 ， 
当 页 面 加 载 时 ( 即 触发 Load 事件 ) ， 页 面 中 文本 字段 和 文本 域 将 显示 预 设 的 文本 内 容 ， 如 图 14-6 所 示 。 


14.3.2 ”设置 框架 文本 ee Ee a 


便 " 上 四” 屿 "NE -人 IAW: “| 


























【设置 框架 文本 】 行 为 允许 动态 设置 框架 的 文本 . 
可 以 用 指定 的 内 容 替 换 框架 的 内 容 和 格式 设置 。 该 内 
容 可 以 包含 任何 有 效 的 HIML 代码 。 

在 使 用 【设置 框架 文本 】 行 为 之 前 ， 首先 要 创建 
框架 页 面 , 或 者 直接 在 文档 中 插入 框架 。 单 击 【 布 局 】 
选项 卡 中 的 【框架 : 顶部 框架 】 按 钮 ， 在 文档 中 插入 

下 结构 的 框架 。 将 光标 置 于 mainFrame 框架 中 .在 
【行为 】 面 板 的 【添加 行为 】 菜 单 中 执行 【设置 框架 文 
本 】 命 令 。 然 后 ,在 弹出 的 对 话 框 中 选择 【框架 】 名 图 14-6 设置 文本 域 文字 
称 , 并 在 【新 建 HIML]】 文本 框 中 输入 HTML 代码 或 
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文本 。 设 置 完 成 后 预览 效果 ， 当 光标 指针 经 过 mainFrame 框架 时 . 其 所 包含 的 页 面 内 容 将 蔡 换 为 指定 的 
图 像 。 





04 


本 章 概要 性 地 介绍 了 网 页 交互 应 用 .为 本 书后 续 的 学 习 打下 坚实 的 基础 ， 主 要 讲述 网 页 交互 应 用 . 
内 容 包括 网 页 行为 概述 、 网 页 交互 步骤 、 设 置 文本 ， 其 中 包括 制作 吸引 人 的 网 站 的 一 些 方法 和 相关 技术 ， 
接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进行 实践 。 


14.4.1 制作 拼图 游戏 


拼图 游戏 是 将 图 像 放 置 在 AP Div 层 中， 通过 为 该 层 添加 拖 动 AP 元 素 行为 ， 并 设置 鼠标 拖 动 时 所 移 
动 的 范围 区 域 等 属性 来 制作 拼图 游戏 。 本 例 运用 拖 动 AP 元 素来 实现 该 效果 ， 主 要 练习 创建 AP Div 层 、 
设置 AP Div 层 属性 、 打 开行 为 面板 、 执 行 拖 动 AP 元 素 、 设 置 拖 动 AP 元 素 属性 ， 如 图 14-7 所 示 。 
STEP|01 打开 素材 页 面 “index.html”. 将 光标 置 于 ID 为 rightmain 的 Div 层 中 . 单 击 【 插 入 】 面 板 HTML 
选项 中 的 Div 按钮 ， 创 建 了 D 为 title 的 Div 层 ， 并 设置 其 CSS 样式 属性 。 将 光标 置 于 该 层 中 插入 图 像 及 
输入 文本 ， 如 图 14-8 和 图 14-9 所 示 。 
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挂图 小 游 束 小 游 束 > 拼 向 日 葵花 小 游戏 





: 国 :dreap 





图 14-7 制作 拼图 游戏 图 14-8 创建 ID 为 title 的 Div 层 图 14-9 页 面 效 果 


STEP|02 单 击 [插入 ] 面 板 HTML 选项 中 的 【绘制 AP Div] 按 钮 , 在 ID 为 title 的 Div 层 下 方 绘制 ap Div5 
层 . 选择 该 层 . 在 【属性 】 面 板 中 设置 左 对 齐 、 上 对 齐 、 宽 、 高 等 属性 ， 并 将 光标 置 于 该 层 中 插入 图 像 
“全 05.png"， 如 图 14-10 和 图 14-11 所 示 。 
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图 14-10 【属性 】 面 板 1 




















图 14-11 【属性 】 面 板 2 





STEP|03 单 击 【绘制 AP Div】 按钮 绘制 apDiv2 图 层 ， 选择 该 层 ， 在 【属性 】 检 查 器 中 依次 设置 左 对 
齐 、 上 对 齐 、 宽 、 高 等 属性 ， 并 将 光标 置 于 该 层 中 插入 图 像 “ 全 02.png ， 如 图 14-12 和 图 14-13 所 示 。 








理性 
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wm “Emorx] 二 00[ 150wx| 可 见 性 WJ atm =] 革 果 病名 
| 


上 | 





图 14-12 【属性 】 面 板 1 
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图 14-13 【属性 】〗】 面 板 2 


STEP|04 按照 相同 的 方法 ， 依 次 再 绘制 7 个 apDiv 层 . 排列 顺序 是 一 致 的 ， 每 一 行 放置 三 个 apDiv 层 ， 
一 共 放置 三 行 ， 并 在 【属性 】 检 查 器 中 依次 设置 每 一 行 放置 的 apDiv 层 的 左 对 齐 、 上 对 齐 、 宽 、 高 等 属 
性 。 然 后 ， 在 每 一 个 层 中 插入 相应 的 图 像 ， 如 图 14-14 和 图 14-15 所 示 。 








图 14-14 页 面 效果 
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本 css| 编辑 规则 “] [CSS Desieer ] 大 小 G) 12 -Ee 
贺 北 #2 可 人 200rx 时 未 [atolt >] 到 采用 像 D 辐 
下 元素 上 四 | 高 isors | 标签 @W[mry ，] 衣 果 戎 色 CI 












图 14-15 【属性 】 面 板 





STEP|05 在 标签 栏 中 选择 body 标签 . 按 ShifttF4 组 合 键 打开 【行为 】 面 板 ， 单 才 


各 【添加 行为 】 按 钮 Egg， 


在 下 拉 列 表 中 执行 【 拖 动 AP 元 素 】 命 令 ， 将 弹出 【 拖 动 AP 元 素 】 对 话 框 。 然 后 ， 在 弹出 的 【 拖 动 AP 


元 素 】 对 话 框 中 , 设置 【基本 】 选 项 卡 中 的 【AP 元 素 】 【移动 ] 【放下 目标 】、【 靠 齐 距离 】 参 数 ， 如 图 


14-16 和 图 14-17 所 示 。 















































标签 cboay> 
[zj 到 | 几 +] 二 a 
onLoad 交接 图 像 
onLoad 
onLoad 弹出 信息 
onLoad 恢复 交换 图 像 
et 打开 浏览 器 窗口 
onLoa 一 入 
onLoad 拖 动 AP 元 素 | | 
onLoad 改变 尾 性 
onLoad 效果 Ap 元 天 [diy “spDivl” 
革 切 : | 限制 | 上 :0 F300 £0 右 400 
显示 - 隐 芒 元 素 放下 时: 左 306 。 上 :1 [到 但 日 毅 广 置 ] 
检查 插件 其 齐 反 高 : 50 。 像素 浪 近 放下 日 标 
检查 表单 
设置 文本 
图 14-16 【行为 】〗 面 板 图 14-17 【 拖 动 AP 元 素 〗 对 话 框 


STEP|06 在 标签 栏 中 选择 body 标签 . 按 ShifttF4 组 合 键 打开 【行为 】 面 板 , 单 击 【 添 加 行为 】 按 钮 [ay , 
在 下 拉 列 表 中 执行 【 拖 动 AP 元 素 】 命 令 ， 将 弹出 【 拖 动 AP 元 素 】 对 话 框 。 然 后 ， 在 【 拖 动 AP 元 素 】 
对 话 框 中 设置 【基本 】 选 项 卡 中 的 【AP 元 素 】 【移动 ] 【放下 目标 】 【 靠 齐 距离 】 参 数 ， 如 图 14-18 



































所 示 。 
放下 目标 左 508 。 上 - 149 [取得 目前 位 置 
敌 齐 下 高 : 50 。 八 素 接近 放下 日 标 
图 14-18 【 拖 动 AP 元 素 〗 对 话 框 
STEP|07 按照 相同 的 方法 . 每 执行 一 次 【 拖 动 AP 元 素 】 命 令 . 都 应 先 选择 body 标签 .然后 再 打开 【 行 








为 】 面 板 ， 在 弹出 的 【 拖 动 AP 元 素 】 对 话 框 中 . 设置 【基本 】 选 项 卡 中 的 【AP 
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元 素 】、 【移动 ] 【放下 





目标 】、【 靠 齐 距离 】 参 数 。 每 添加 一 次 行为 .【 行 为 】 面 板 中 就 会 增加 一 个 . 如 图 





二 | 疡 级 | 





AP 元 素 : [div “apDiv3” 
移动: | 限制 ~] 上 :0 下 30 左 400 有 0 








放下 目标 左 : 708 。 上 : 149 [取得 目前 位 置 
靠 齐 丐 离 - 50 ”像素 接近 放下 日 标 





第 14 章 网 页 交互 应 用 


14-19 所 示 。 





图 14-19 【 拖 动 AP 元 素 】 对 话 杠 


STEP|I08 在 【基本 】 选 项 卡 中 ,设置 apDiv3 的 限制 范围 参数 如 下 : 上 : 0、 下 : 3 





00、 左 : 400、 右 : 0; 





设置 apDiv4 的 限制 范围 参数 如 下 : 上 : 150、 下 : 150、 左 : 0、 右 : 400; 设置 apDiv5 的 限制 范围 参数 





如 下 : 上 : 150、 下 : 150、 左 : 200、 右 : 200; 设置 apDiv6 的 限制 范围 参数 如 下 : 











主 ; 150、 下: 150, 


左 : 400. 右 : 0: 设置 apDiv7 的 限制 范围 参数 如 下 : 上 : 300、 下 : 0、 左 : 0、 右 : 400; 设置 apDiv8 





的 限制 范围 参数 如 下 : 上 : 300、 下 : 0. 左 : 200、 右 : 200; 设置 apDiv9 的 限制 范 








由 参数 如 下 : 上 : 300、 











下 : 0、 左 : 400、 右 : 0。 设 置 完成 后 , 打开 正 浏览 器 预览 效果 。 然 后 用 鼠标 移动 图 像 ， 将 图 像 拼 成 一 


个 完整 的 向 日 葵花 图 像 。 
14.4.2 ”制作 漂浮 广告 








许多 企业 网 站 的 首页 都 有 一 个 浮动 的 广告 ， 它 的 效果 是 上 下 左右 漂浮 ， 当 遇 到 浏览 器 的 边界 时 即 会 


反弹 ,能 够 吸引 人 的 注意 力 ,开发 潜在 的 客户 .这 种 广告 模式 已 经 在 互联 网 普及 使 用 ， 
代码 制作 网 页 中 的 漂浮 广告 ， 如 图 14-20 所 示 。 








Sr 


本 2 








本 例 将 通过 Javascript 


一 村 和 天 人 二 澡 潍 乎 常 心 得 世 直 愉 个 








图 14-20 ”制作 漂浮 广告 


STEP|01 打开 素材 ， 切 换 至 【代码 】 视 图 ， 在 <body>、</body> 中 间 插 入 一 个 漂浮 
样式 ， 如 图 14-21 所 示 。 

















图 片 的 层 ， 并 定义 其 











STEP|02 在 <body>、</body> 之 间 插 入 Javascript 代码 ， 用 来 声明 程序 所 需要 的 各 个 变量 ,如 图 14-22 所 示 。 


<script type="text/javascript"> 
var xPos 





* 图 平 位 置 。 






始 值 * 


var Hoffset = 








var Woffset = 0; 





var yon = 6; 





<div id=imgl style="Z-INDEX: ; LEFT: ; WIDTH: ye | 

Jpx; POSITION: absolute; TOP: x; HEIGHT: ; hd 
width:1 Ut ein onMouSeover var pause = true; _ 
=pause_resume() onMouSeout=pause_resume()><a href="#"> * 声 明 变量 pause 旱 认 值 图 片 漂浮 暂停 * 
<img src="images/piao.jpg" width="129"”height="126" var interval; 
border="e"></a></div> * 声 明 青 除 setIntervat 对 象 时 间 间 隔 的 变量 * 


图 14-21 CSS 样式 代码 图 14-22 CSS 样式 代码 


STEP|03 在 Javascript 代码 中 定义 三 个 函数 ,分 别 是 changepos0、start0 和 pause-resume0 函 数 ， 通 过 调 
用 这 些 函 数 实现 窗口 漂浮 ， 如 图 14-23 所 示 。 


function changePos() 





{ 
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width = document.body.clientWwidth; 
height = document.body.clientHeight; 
Hoffset = imgl.offsetHeight; 

Woffset = imgl.offsetwidth; 


imgl.style. left 


xPos + document.body.scrollLeft; 


imgl.style.top = yPos + document.body.scrollTop; 
if (yon) 
{yPos = yPos + step;} 
else 
{yPos = yPos - step;} 
if (yPos < 日 
{yon 3yPos 3) 
if (yPos >= (height - Hoffset)) 
{yon = 6;yPos = (height - Hoffset);} 
if (xon) 
{xPos = xPos + step;} 
else 
{xPos = xPos - step;} 
if (xPos < 日 
{xon SxPos ;} 
If (xPos >= (width - Woffset)) 
{xon = ;xPos = (width - Woffset); } 








function start() 


{ 
imgl.visibility = "visible"; 


interval = setInterval('changePos()', delay); 


function pause_resume() 


{ 


if(pause) 
{ 


clearInterval(interval); 


pause = false;} 
else 
{ 
interval = setInterval('changePos()',delay); 


pause = true; 


} 


</script> 


图 14-23 CSS 样式 代码 





交互 界面 是 人 和 计算 机 进行 信息 交换 的 通道 ,用 户 通 过 交互 界面 向 计算 机 输入 信息 、 进 行 操作 ， 计 
算 机 则 通过 交互 界面 向 用 户 提供 信息 ， 以 供 阅读 、 分 析 和 判断 。 在 互联 网 中 ， 多 数 网 站 都 会 使 用 动态 网 
页 技术 , 通过 读 取 数据 库 中 的 内 容 自动 更 新 网 页 。 常见 的 动态 网 页 技术 的 种 类 繁多 . 包括 ASP、 ASPNET、 
PHP 和 JSP 等。 这 些 动态 网 页 技术 ， 很 多 都 会 通过 表单 实现 与 用 户 的 交互 ， 获 取 或 显示 各 种 信息 。 

本 章 将 详细 介绍 网 页 中 的 各 种 表单 元 素 ， 以 及 Spry 表单 验证 的 方法 等 相关 知识 ， 实 现 简单 的 人 与 网 
页 之 间 的 交互 。 通 过 本 章 的 学 习 我 们 能 够 在 网 页 中 插入 各 种 表单 元 素 ， 以 及 了 解 运用 Spry 表单 验证 的 
方法 。 








;第 15 章 交互 页 面 设 计 


国有 轩 应 用 表单 元 素 


在 设计 网 站 时 ， 免不了 使 用 表单 来 设计 一 些 交 互 内 容 . 如 制作 登录 功能 等 。 在 Dreamweaver 中 ， 表 
单 的 主要 目的 是 将 客户 端 (用 户 ) 的 一 些 信息 传递 到 服务 . 并 进行 处 理 或 存储 等 。 用 户 可 通过 表单 功能 . 
来 制作 一 些 用 户 注册 、 登 录 、 反 馈 等 内 容 ， 并 且 还 可 以 制作 一 些 调查 表 、 在 线 订单 等 交互 内 容 。 本 节 主 
要 讲述 在 网 页 中 插入 表单 、 文 本 字段 、 按 钮 、 列 表 /菜单 、 单 选 按 钮 、 复 选 框 。 通 过 本 章 的 可 以 为 后 面 的 
网 站 建设 奠定 基础 。 


15.1.1 插入 表单 


表单 是 实现 网 页 互动 的 元 素 ， 通 过 与 客户 端 或 服务 器 端 脚本 程序 的 结合 使 用 ， 可 以 实现 互动 性 ,如 
调查 表 、 留 言 板 等 。 在 Dreamweaver 中 ， 可 以 为 整个 网 页 创建 一 个 表单 .也 可 以 为 网 页 中 的 部 分 区 域 创 
建 表单 ， 其 创建 方法 都 是 相同 的 。 将 光标 置 于 文档 中 ， 单 击 【 表 单 】 选 项 卡 中 的 【表单 】 按 钮 ， 即 可 插 
入 一 个 红色 的 表单 ， 如 图 15-1 所 示 。 























县 可口 回想 四 四 品目 一 P 











图 15-1 插入 表单 


将 光标 移 至 刚 插入 的 表单 域 中 .在 状态 栏 的 标签 选择 器 中 单 击 选中 <form# formml> 标 签 ， 即 可 将 表单 
域 选中 ， 可 以 在 【属性 】 面 板 上 对 表单 域 的 属性 进行 设置 ,如 图 15-2 所 示 。 














| "到 | 号 元 -| van Ee @ 
Method FOST 下 
nevaldate Encype 点 认 | Target 对 认 > Accept Cnarset A 
口 Au compkte 








图 15-2 表单 域 的 【属性 〗 面 板 


其 中 .ID 用 来 设置 表单 的 名 称 . 它 是 表单 在 网 页 中 唯一 的 识别 标志 . 是 XHTML 标准 化 的 标识 . 只 
可 在 【属性 】 检 查 器 中 设置 。 在 选择 表单 区 域 后 ,用户 可 以 在 【属性 】 检 查 器 中 设置 表单 的 各 项 属性 . 





. 
eo. 
日 





其 


属性 名 称 及 说 明 如 表 15-1 所 示 。 


表 15-1 表单 的 各 项 属性 及 作用 
属 性 作 用 
表单 在 网 页 中 唯一 的 识别 标志 ， 是 XHTML 标准 化 的 标识 ， 只 可 在 【属性 】〗 检 查 器 中 设置 
将 表单 数据 进行 发 送 ， 其 值 采用 URL 方式 。 在 大 多 数 情况 下 ， 该 属性 值 是 一 个 HTTP 类 
型 的 URL， 指 向 位 于 服务 器 上 的 用 于 处 理 表单 数据 的 脚本 程序 文件 或 CGI 程序 文件 
默认 使 用 浏览 器 默认 的 方式 来 处 理 表单 数据 









动作 








方 | POST 表示 将 表单 内 容 作 为 消息 正文 数据 发 送 给 服务 器 
法 i 把 表单 值 添加 给 URL， 并 向 服务 器 发 送 GET 请 求 。 因 为 URL 被 限定 在 8192 个 字符 之 内 ， 
所 以 不 要 对 长 表单 使 用 GET 方法 


_blank 定义 在 未 命名 的 新 窗口 中 打开 处 理 结果 
_parent “| 定义 在 父 框架 的 窗口 中 打开 处 理 结果 
目 | self 定义 在 当前 窗口 中 打开 处 理 结果 
标 | top 定义 将 处 理 结果 加 载 到 整个 浏览 器 窗口 中 ， 清 除 所 有 框架 
设置 发 送 表 单 到 服务 器 的 媒体 类 型 ， 它 只 在 发 送 方法 为 POST 时 才 有 效 ， 其 默认 值 为 
ES application/x-www-form-urlemoded; 如 果 要 创建 文件 上 传 域 ， 应 选择 multipart/form-data 
类 定义 表单 及 其 中 各 种 表单 对 象 的 样式 











用 户 也 可 通过 编写 代码 插入 表单 。 在 Dreamweaver 中 打开 网 页 文档 , 单 击 【 代 码 视图 】 按钮 , 在 【 代 
码 视 图 】 窗 口中 检索 指定 的 位 置 ， 然 后 通过 form 标签 为 网 页 文档 插入 表单 。 


15.1.2 ”插入 文本 字段 


文本 字段 ， 又 被 称 作文 本 域 ， 是 一 种 最 常用 的 表单 组 件 ， 其 作用 是 为 用 户 提供 一 个 可 输入 的 网 页 容 
器 。 在 【插入 】 面 板 中 单 击 【 文 本 字段 】 按 钮 . 打开 【输入 标签 辅助 功能 属性 】 对 话 框 ， 为 插入 文本 字 
段 进行 一 些 简单 的 设置 ， 如 图 15-3 所 示 。 
二 入 标 答 博 助 功能 屋 性 





























be 
fe 
3 
司 使 用 "for 局 性 附加 标签 标记 
样式 : 回 用 标签 标记 环绕 
) 无 标 人 标记 


位 置 回 在 表单 项 前 
了 在 表单 项 后 


访问 刍 。。 ”Tab 刍 来 引 


如 果 在 插入 对 象 时 不 起 输入 此 信息 ， 计 更改 莉 
助 功能 "首选 参数 。 


图 15-3 插入 文本 字段 
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【输入 标签 辅助 功能 属性 】 对 话 框 中 包括 6 种 基本 属性 . 其 名 称 及 作用 如 表 15-2 所 示 。 
表 15-2 【输入 标签 辅助 功能 属性 】 对 话 框 中 的 属性 及 作用 






文本 字段 的 ID 属性 ， 用 于 提供 脚本 的 引用 
文本 字段 的 提示 文本 
提示 文本 显示 的 方式 
提示 文本 的 位 置 
访问 该 文本 字段 的 快捷 刍 
在 当前 网 页 中 的 Tab 键 访问 顺序 













位 置 
访问 键 
Tab 键 索引 

















在 设置 输入 标签 辅助 功能 属性 后 , 即 可 在 【属性 】 检 查 器 中 设置 文本 字段 的 属性 。 在 文本 字段 的 【 属 
性 】 检 查 器 中 ,各 个 属性 的 名 称 及 作用 如 表 15-3 所 示 。 


表 15-3 文本 字段 的 【属性 】 检 查 器 中 的 属性 及 作用 
作 用 

文本 字段 的 id 和 mname 属性 ， 用 于 提供 对 脚本 的 引用 

文本 字段 的 宽度 (以 字符 大 小 为 单位 ) 

文本 字段 中 允许 的 最 多 字符 数量 

定义 文本 字段 中 的 文本 不 换行 

定义 文本 字段 中 的 文本 可 换行 

定义 文本 字段 中 的 文本 以 密码 的 方式 显示 

定义 文本 字段 中 初始 的 字符 

定义 文本 字段 禁止 用 户 输入 (显示 为 灰色 ) 











定义 文本 字段 禁止 用 户 输入 (显示 方式 不 变 ) 
定义 文本 字段 使 用 的 CSS 样式 


15.1.3 插入 按钮 


按钮 既 可 以 触发 提交 表单 的 动作 ， 也 可 以 在 用 户 需 要 修改 表单 时 将 表单 恢复 到 初始 状态 。 将 鼠标 光 
标 移动 到 文档 中 的 指定 位 置 ， 单 击 【 插 入 】〗 面 板 中 的 【按钮 】 按 钮 ， 即 可 插入 一 个 按钮 。 在 插入 按钮 之 
后 ， 用 户 选择 该 按钮 ， 然 后 在 【属性 】 检 查 器 中 可 以 设置 其 属性 。 按 钮 表单 对 象 的 【属性 】 检 查 器 中 包 
括 4 种 属性 设置 ， 其 名 称 及 作用 如 表 15-4 所 示 。 

















表 15-4 ”按钮 表单 对 象 的 【属性 】 检 查 器 中 的 属性 及 作用 






按钮 的 id 和 name 属性 ， 供 各 种 脚本 引用 


















值 按钮 中 显示 的 文本 值 
将 按钮 设置 为 提交 型 ， 单 击 即 可 将 表单 中 的 数据 提交 到 动态 程序 中 
动作 将 按钮 设置 为 重 设 型 ， 单 击 即 可 清除 表单 中 的 数据 


根据 动态 程序 定义 按钮 触发 的 事件 
定义 按钮 的 样式 
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15.1.4 插入 列表 /菜单 


列表 菜单 是 一 种 选择 性 的 表单 . 其 允许 设置 多 个 选项 . 并 为 每 个 选项 设 定 一 个 值 . 供用 户 进行 选择 。 
单 击 【 表 单 】 选 项 卡 中 的 【选择 (列表 /菜单 )】 按 钮 ， 在 弹出 的 【输入 标签 辅助 功能 属性 】 对 话 框 中 输入 
【标签 文字 】， 然 后 单 击 【 确 定 】 按 钮 ， 即 可 插入 一 个 列表 菜单 。 插 入 后 ,菜单 中 并 无 选项 内 容 。 此 时 
需要 单 击 【 属 性 】 检 查 器 中 的 【列表 值 】 按 钮 .在 弹出 的 对 话 框 中 添加 选项 。 

列表 菜单 的 【属性 】 检 查 器 中 包括 8 种 基本 属性 ， 其 名 称 及 作用 如 表 15-5 所 示 。 


























表 15-5 列表 菜单 的 【属性 】 检 查 器 中 的 属性 及 作用 
名 称 作 用 






定义 列表 /菜单 的 id 和 name 属性 


将 列表 ] 荣 音 设 于 为 菜 











将 列表 /菜单 设置 为 列表 
高 度 定义 列表 /菜单 的 高 度 
选 定 范围 定义 列表 / 莱 单 是 否 克 许 多 项 选择 
初始 化 时 选 定 定义 列表 /菜单 在 初始 化 时 被 选 定 的 什 
单 击 该 按钮 可 制定 列表 /菜单 的 选项 


列表 值 
类 


15.1.5 ”插入 单 选 按 钮 


单 选 按 钮 组 是 一 种 单项 选择 类 型 的 表单 ， 其 提供 一 种 或 多 种 选项 供用 户 选择 ， 同 时 限制 用 户 只 能 选 
择 个 选项 。 在 网 页 文档 中 ， 单 击 【 插 入 】 面 板 中 的 【 单 选 按钮 】 按 钮 ， 打 开 【 输 入 标签 辅助 功能 
属性 】 对 话 框 ， 在 其 中 设置 单 选 按钮 的 一 些 基 本 属性 。 

在 插入 单 选 按钮 后 ， 用 户 可 以 通过 选择 该 单 选 按钮 ， 在 【属性 】 检 查 器 中 设置 其 属性 。 除 此 之 外 ， 
用 户 还 可 以 通过 单 击 【 插 入 】 面 板 中 的 【 单 选 按钮 组 】 按 钮 ， 在 打开 的 【 单 选 按钮 组 】 对 话 框 中 添加 选 
项 ,直接 插入 一 组 单 选 按钮 。 


15.1.6 插入 复 选 杠 


复 选 框 是 一 种 允许 用 户 多 项 选择 的 表单 对 象 ， 其 与 单 选 按钮 最 大 的 区 别 在 于 ， 人 允许 用 户 选择 其 中 的 
多 个 选项 。 在 【插入 】 面 板 中 单 击 【 复 选 框 】 按 钮 ， 然 后 在 弹出 的 【输入 标签 辅助 功能 属性 】 对 话 框 中 
设置 复 选 框 的 标签 等 属性 。 

在 插入 复 选 框 后 ， 可 以 启用 复 选 框 , 在 【属性 】 检 查 器 中 设置 其 各 种 属性 。【 属 性 】 检 查 器 中 主要 包 
含 三 种 属性 设置 ， 其 名 称 及 作用 如 表 15-6 所 示 。 除 此 之 外 . 单 击 【 插 入 】 面 板 中 的 【 复 选 框 组 】 按 钮 
可 以 直接 在 文档 中 插入 一 组 复 选 框 ， 其 方法 与 插入 单 选 按钮 组 相同 。 


定义 列表 /菜单 的 样式 

































































表 15-6 复 选 框 的 【属性 】 检 查 器 中 的 属性 及 作用 


定义 复 选 框 的 这 和 name 属性 ， 供 脚本 调用 
如 该 项 被 选 定 ， 则 传递 给 脚本 代码 的 值 
定义 复 选 框 初始 化 时 处 于 被 选中 的 状态 
定义 复 选 框 初始 化 时 处 于 未 选中 的 状态 
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国 5.2 | Spry 表单 验证 


Spry 表单 验证 是 一 种 Dreamweaver 内 建 的 用 户 交互 元 素 , 其 类 似 Dreamweaver 的 行为 , 可 以 根据 用 
户 对 表单 进行 的 操作 执行 相应 的 指令 。Dreamweaver 共 包 含 6 种 Spry 表单 验证 元 素 ， 以 验证 6 大 类 表单 
对 象 中 的 内 容 。 本 节 主要 讲述 Spry 验证 文本 域 、Spry 验证 文本 区 域 、Spry 验证 复 选 框 、Spry 验证 选择 、 
Spry 验证 密码 、Spry 验证 确认 。 通 过 本 章 的 学 习 可 以 为 后 面 的 网 站 建设 奠定 基础 。 
15.2.1 ”Spry 验证 文本 域 


Spry 验证 文本 域 的 作用 是 验证 用 户 在 文本 字段 中 输入 的 内 容 是 否 符合 要 求 。 通 过 Dreamweaver 打开 








网 页 文档 ， 并 选中 


需要 进行 验证 的 文本 域 。 然 后 ， 单 击 【 插 入 】 面 板 + 





Ph 的 【表单 】| 【Spry 验证 文本 域 】 


按钮 ， 为 文本 域 添加 Spry 验证 。 在 插入 Spry 验证 文本 域 或 为 文本 域 添加 Spry 验证 后 ， 即 可 单 击 蓝 色 的 
Spry 文本 域 边框 ， 然 后 在 【属性 】 面 板 中 设置 Spry 验证 文本 域 的 属性 。 
Spry 验证 文本 域 有 多 种 属性 可 以 设置 。 包 括 设置 其 状态 、 验 证 的 事件 等 ， 如 表 15-7 所 示 。 


表 15-7 Spry 验证 文本 域 的 属性 


属 性 名 作 用 
Spry 文本 域 定义 Spry 验证 文本 域 的 id 和 name 等 属性 ， 以 供 脚本 引用 
类 型 定义 Spry 验证 文本 域 所 属 的 内 置 文本 格式 类 型 
预览 定义 网 页 文档 被 加 载 或 用 户 重 置 表单 时 Spry 验证 的 状态 
状态 定义 用 户 输入 的 表单 内 容 有 效 时 的 状态 
选中 该 项 目 ， 则 Spry 验证 将 发 生 于 表单 获取 焦点 时 
验证 于 选中 该 项 目 ， 则 Spry 验证 将 发 生 于 表单 内 容 被 改变 时 
选中 该 项 目 ， 则 Spry 验证 将 发 生 于 表单 被 提交 时 
最 小 字符 数 设置 表单 中 最 少 九 许 输 入 多 少 字符 
最 大 字符 孝 设置 表单 中 最 多 克 许 输入 多 少 字符 
最 小 值 设置 表单 中 允许 输入 的 最 小 值 
最 大 值 设置 表单 中 允许 输入 的 最 大 值 
必需 的 定义 表单 为 必需 输入 的 项 目 
强制 模式 定义 禁止 用 户 在 表单 中 输入 无 效 字符 
图 案 根据 用 户 输入 的 内 容 显示 图 像 
提示 根据 用 户 输入 的 内 容 显 示 文本 





在 【属性 】 面 板 中 ， 定 义 任意 一 个 Spry 属性 .在 【预览 状态 】 的 下 拉 列 表 中 都 会 增加 相应 的 状态 类 
型 。 选 中 【预览 状态 】 下 拉 列 表 中 相应 的 类 型 后 ， 即 可 设置 该 类 型 状态 时 网 页 显示 的 内 容 和 样式 。 例 如 . 
定义 【最 小 字符 数 】 为 8， 则 【预览 状态 】 的 下 拉 列 表 中 将 新 增 【 未 达到 最 小 字符 数 】 的 状态 ， 选中 该 状 
态 后 ， 即 可 在 【设计 视图 】 中 修改 该 状态 。 


15.2.2 ”Spry 验证 文本 区 域 


Spry 验证 文本 区 域 也 是 一 种 Spry 验证 内 容 . 其 主要 用 了 








验证 文本 区 域内 容 以 及 读 取 一 些 简单 的 属 
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性 。 在 Dreamweaver 中 .可 直接 单 击 【 插 入 】 面 板 中 【表单 】 列 表 框 中 的 【Spry 验证 文本 区 域 】 按 钮 ， 
创建 Spry 验证 文本 区 域 。 

如 果 网 页 文档 中 已 插入 了 文本 区 域 ， 则 可 选中 已 创建 的 普通 文本 区 域 . 用 同样 的 方法 为 表单 对 象 添 
加 Spry 验证 方式 。 在 【设计 视图 】 中 选择 蓝 色 的 Spry 文本 区 域 后 即 可 在 【属性 】 面 板 中 定义 Spry 验 
证 文本 区 域 的 内 容 。 

Spry 验证 文本 区 域 的 【属性 】 面 板 中 . 比 Spry 验证 文本 域 增加 了 两 个 选项 。 
1. 计数 器 

计数 器 是 一 个 单 选 按钮 组 . 提供 了 三 种 选项 供用 户 选择 。 当 用 户 选择 【无 】 时 . 将 不 在 Spry 验证 结 
果 的 区 域 显示 任何 内 容 。 当 用 户 选 择 【 字 符 计数 】 时 ， 则 Dreamweaver 会 为 Spry 验证 区 域 添加 一 个 字符 
技术 的 脚本 . 显示 文本 区 域 中 已 输入 的 字符 数 。 当 用 户 设置 了 最 大 字符 数 之 后 . Dreamweaver 将 允许 用 户 
选择 【其 余 字 符 】〗 选 项 ， 以 显示 文本 区 域 中 还 允许 输入 多 少 字符 。 
2. 禁止 额外 字符 

如 果 用 户 已 设置 最 大 字符 数 ， 则 可 启用 【禁止 额外 字符 】 复 选 框 ， 其 作用 是 防止 用 户 在 文本 区 域 中 
输入 的 文本 超过 最 大 字符 数 。 当 启用 该 复 选 框 后 ， 如 用 户 输入 的 文本 超过 最 大 字符 数 ， 则 无 法 再 向 文本 
区 域 中 输入 新 的 字符 。 


15.2.3 ”Spry 验证 复 选 框 


Spry 验证 复 选 框 的 作用 是 在 用 户 启用 复 选 框 时 显示 选择 的 状态 。 与 之 前 几 种 Spry 验证 表单 不 同 
Dreamweaver 不 允许 用 户 为 已 添加 的 复 选 框 添加 Spry 验证 ， 只 允许 用 户 直接 添加 Spry 复 选 框 。 

用 Dreamweaver 打开 网 页 文档 ， 即 可 单 击 【 插 入 】 面 板 中 【表单 】 列 表 框 中 的 【Spry 验证 复 选 框 】 
按钮 打开 【输入 标签 辅助 功能 属性 】 对 话 框 ， 在 对 话 框 中 简单 设置 ， 然 后 单 击 【 确 定 】 按 钮 添加 复 选 
框 。 用 户 可 单 击 复 选 框 上 方 的 蓝 色 【Spry 复 选 框 】 标 记 ， 然 后 在 【属性 】 面 板 中 定义 Spry 验证 复 选 框 的 
属性 。 

Spry 复 选 框 有 两 种 设置 方式 ， 一 种 是 作为 单个 复 选 框 而 应 用 的 【必需 】 选 项 ， 另 一 种 则 是 作为 多 个 
复 选 框 ( 复 选 框 组 ) 而 应 用 的 【实施 范围 】 选 项 。 在 用 户 选 择 【 实 施 范围 】 选 项 后 ， 将 可 定义 Spry 验证 
复 选 框 的 【最 小 选择 数 】 和 【最 大 选择 数 】 等 属性 。 在 设置 了 【最 小 选择 数 】 和 【最 大 选择 数 】 后 ,【 预 
览 状态 】 的 列表 中 会 增加 【未 达到 最 小 选择 数 】 和 【已 超过 最 大 选择 数 】 等 项 目 。 选 择 相应 的 项 目 ， 即 
可 对 Spry 复 选 框 的 返回 信息 进行 修改 。 

15.2.4 ”Spry 验证 选择 

Spry 验证 选择 的 作用 是 验证 列表 /菜单 和 跳 转 菜单 的 值 ， 并 根据 值 显示 指定 的 文本 或 图 像 内容 。 在 
Dreamweaver 中 ， 单 击 【 插 入 】 面 板 中 【表单 】 列 表 框 中 的 【Spry 验证 选择 】 按 钮 ， 即 可 为 网 页 文档 插 
入 Spry 验证 选择 。 选 中 Spry 选择 的 标记 ， 即 可 在 【属性 】 面 板 中 编辑 Spry 验证 选择 的 属性 。 


在 Spry 验证 选择 的 【属性 】 面 板 中 .人 允许 用 户 设置 Spry 验证 选择 中 不 允许 出 现 的 选择 项 以 及 验证 
选择 的 事件 类 型 等 属性 。 


15.2.5 ”Spry 验证 密码 


Spry 验证 密码 的 作用 是 验证 用 户 输入 的 密码 是 否 符合 服务 器 的 安全 要 求 。 在 Dreamweaver 中 . 单 击 
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【插入 】 面 板 中 【表单 】 列 表 框 中 的 【Spry 验证 密码 】 按 钮 . 即 可 为 密码 文本 域 添加 Spry 验证 。 

若 尚 未 为 网 页 文档 插入 密码 文本 域 ， 则 可 直接 单 击 【 插 入 】 面 板 中 【表单 〗】 列 表 框 中 的 【Spry 验证 
密码 】 按 钮 ， Dreamweaver 将 自动 为 网 页 文档 插入 一 个 密码 文本 域 .然后 添加 Spry 验证 。 单 击 Spry 密码 
的 蓝 色 标签 ， 即 可 在 【属性 】 面 板 中 设置 验证 密码 的 方式 。 

Spry 验证 密码 的 【属性 】 面 板 中 包含 10 种 验证 属性 .如 表 15-8 所 示 。 


表 15-8 Spry 验证 密码 的 【属性 】 面 板 中 的 验证 属性 

















验证 属性 名 作 用 
最 小 字符 数 定义 用 户 输入 的 密码 最 小 位 数 
最 大 字符 数 定义 用 户 输入 的 密码 最 大 位 数 
最 小 字母 教 定义 用 户 输 入 的 密码 中 最 少 出 现 多 少 小 写字 母 
最 大 字母 数 定义 用 户 输入 的 密码 中 最 多 出 现 多 少 小 写字 母 
最 小 数字 数 定义 用 户 输 入 的 密码 中 最 少 出 现 多 少数 字 
最 大 数字 数 定义 用 户 输入 的 密码 中 最 多 出 现 多 少数 字 
最 小 大 写字 母 数 定义 用 户 输 入 的 密码 中 最 少 出 现 多 少 大 写字 母 
最 大 大 写字 母 数 定义 用 户 输入 的 密码 中 最 多 出 现 多 少 大 写字 母 
最 小 特殊 字符 数 定义 用 户 输入 的 密码 中 最 少 出 现 多 少 特殊 字符 (标点 符号 、 中 文 等 ) 
最 大 特殊 宇 符 炒 定义 用 户 输入 的 密码 中 最 多 出 现 多 少 特殊 字符 (标点 符号 、 中 文 等 ) 


15.2.6 ”Spry 验证 确认 


Spry 验证 确认 的 作用 是 验证 某 个 表单 中 的 内 容 是 否 与 男 一 个 表单 内 容 相同 。 在 Dreamweaver 中 ,可 
选择 网 页 文档 中 的 文本 字段 或 文本 域 ， 然 后 单 击 【 插 入 】 面 板 中 【表单 】 列 表 框 中 的 【Spry 验证 确认 】 
按钮 ， 为 文本 字段 或 文本 域 添 加 Spry 验证 确认 。 

用 户 也 可 以 直接 在 网 页 文档 的 空白 处 单 击 【 插 入 】 面 板 中 【表单 】 列 表 框 中 的 【Spry 验证 确认 】 按 
钮 ，Dreamweaver 将 自动 先 插入 文本 字段 ， 然 后 为 文本 字段 添加 Spry 验证 确认 。 选 中 Spry 确认 的 蓝 色 标 
记 ， 即 可 在 【属性 】 面 板 中 设置 其 属性 。 

在 Spry 验证 确认 的 【属性 】 面 板 中 , 用户 可 将 该 文本 字段 或 文本 域 设置 为 必 填 项 或 非 必 填 项 ,也 可 
选择 验证 参照 的 表单 对 象 。 除 此 之 外 ， 用 户 还 可 以 定义 触发 验证 的 事件 类 型 等 。 


I 了 e 攻 综合 实例 


本 章 概要 性 地 介绍 了 网 页 中 的 各 种 表单 元 素 . 以 及 Spry 表单 验证 的 方法 等 相关 知识 . 实现 简单 的 人 
与 网 页 之 间 的 交互 ,为 本 书后 续 的 学 习 打下 坚实 的 基础 。 主 要 讲述 如 何 运用 交互 页 面 设计 ,制作 吸引 人 
的 网 站 的 一 些 方法 和 相关 技术 ， 接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进行 实践 。 


15.3.1 实战 : 制作 问卷 调查 表 


在 设计 问卷 调查 页 时 . 除 使 用 了 之 前 介绍 过 的 文本 区 域 、 按 钮 、 列 表 /菜单 等 表单 元 素 外 . 还 使 用 了 
单 选 按钮 组 和 多 选 按钮 组 ， 以 为 用 户 提供 客观 性 的 选项 ， 提 高 用 户 填写 问卷 调查 的 效率 ， 主 要 练习 插入 
列表 菜单 、 单 选 按钮 组 、 复 选 框 组 、 文 本 字段 、 按 钮 . 如 图 15-4 所 示 。 


























图 15-4 制作 问卷 调查 表 


STEP|01 打开 素材 页 面 “index.html”. 将 光标 放置 在 已 经 添加 的 ID 为 questionnaire 的 表单 元 素 中 , 在 表 
【段落 】， 如 图 15-5 和 图 15-6 





所 示 。 





h 输 入 第 一 个 问题 的 文本 ,然后 在 【属性 】 面 板 中 


设置 【格式 】 为 








单 第 一 行 
1 您 今天 为 什么 访问 艾 告 克 设计 ? 
图 15-5 页 面 效 果 
尾 人 
[| 本 mm[GE] 区 元 -BI 光 招 二 关 #ED[C 加 
本 cs ww) 无 ~ 宙 扩 中 -Og BfO 5 
文档 标 是 | 艾 站 克 设计 一 一 您 身边 938 全 专家 列表 顺 目 
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图 15-6 【属性 】 面 板 
击 【 插 入 】 面 板 【 表 单 】 


而 





问题 的 文本 右 侧 按 Enter 键 换行 ， 将 自动 创建 段落 标签 。 单 
图 15-9 所 示 。 





STEPI02 在 第 一 个 
选项 中 的 【列表 /菜单 】 按 钮 ， 在 弹出 的 【输入 标签 辅助 功能 属性 】 对 话 框 中 设置 ID 为 list， 插 入 列表 菜 


选项 中 的 
单 。 选 择 列表 菜单 所 在 的 行 ， 在 【属性 】 面 板 中 设置 【类 】 为 labels， 如 图 15-7 一 








格式 0 [本 =] 类 iw -BIT 二 招 世 芭 标 是 0 @ 
本 cs wn 无 -加 -加 咎 ”如 区 
3 由 


文 龟 慰 是 | 艾 训 克 设 计 一 一 您 身边 698| 伸 去 家 ] 








图 15-7 段落 【属性 〗】 面 板 





| Css la ~ 








Dpeabed | Soeced | 
DautoFoas Pee 








图 15-8 列表 菜单 【属性 】 面 板 














帮助 00 








图 15-9 【列表 值 〗 对 话 框 


STEP|03 选中 列表 菜单 ， 在 【属性 】 面 板 中 单 击 【 列 表 值 】 按 钮 ， 在 弹出 的 【列表 值 】 对 话 框 中 设置 列 
表 / 菜 单 类 表单 中 的 列表 内 容 ， 即 可 完成 列表 项 目 制作 。 在 列表 /菜单 表单 的 右 侧 按 Enter 键 换行 并 插入 段 
落 ， 在 【属性 】 面 板 中 设置 【类 】 为 【无 ]， 即 可 输入 第 二 个 问题 的 文本 ， 如 图 15-10 一 图 15-12 所 示 。 











BagS 


国 se | Nome list | as 1wus | = 本 a 
~ Dosabled [JReqmed | mm 
口 wutoFoam Mitole 









Ce 











图 15-10 【属性 〗 面 板 1 

















图 15-11 【列表 值 〗 对 话 框 











格式 D [7] 奖 无 -BI 污 殷 生 当 本 @ 
bcss DO 无 “> 梯 扩 四 -ea 目标 @) 、 > 号 

















图 15-12 【属性 】〗】 面 板 2 





STEP|04 在 第 二 个 问题 的 文本 右 侧 按 Enter 键 换行 ， 将 自动 创建 段落 标签 。 单 击 【 插 入 】 面 板 【 表 单 】 
选项 中 的 【 单 选 按钮 组 】 按 钮 ， 在 弹出 的 【 单 选 按钮 组 】 对 话 框 中 设置 单 选 按钮 ， 将 其 插入 到 网 页 中 ， 
删除 单 选 按钮 右 侧 的 换行 ， 并 为 其 设置 类 ， 如 图 15-13 所 示 。 






































布局 , 使用: 图 换行 符 ( <br 标 从 ) 
司 去 格 








图 15-13 【 单 选 按钮 组 】 对 话 杠 


STEP|05 用 同样 的 方式 ,输入 第 三 题 的 题目 . 并 插入 单 选 按钮 组 。 在 新 的 段落 中 输入 第 四 题 的 题目 ， 然 


后 换行 。 执 行 【 插 入 】| 【表单 】|【 复 选 框 组 】 命 令 ， 在 弹出 的 【 复 选 框 组 】 对 话 框 中 添加 复 选 框 的 值 ， 
插入 复 选 框 。 为 删除 复 选 框 组 中 多 余 的 换行 符 . 如 图 15-14 所 示 。 


























名 称 : CheckboxGroupl 
复 进 杠 -十 一 向 加 
标签 值 
更 多 的 产品 展示 夏 先 框 
更 新 的 北 界 资讯 夏 迁 杠 
匡 多 的 灾 科 下载] 夏 选 框 




















布局 ,使 用 : 回 换行 符 ( <br> 标签) 
日 表格 





图 15-14 【 复 选 框 组 】 对 话 杠 





STEP|06 按照 相同 的 方法 ， 通 过 使 用 单 选 按钮 组 制作 第 5 题 ， 使 用 文本 字段 制作 第 6 题 。 选 择 文本 域 ， 
在 【属性 】 检 查 器 中 设置 文本 域 类 型 为 【多 行 】， 页面 效 果 如 图 15-15 所 示 。 

5. 您 大 约 多 久 会 访问 一 次 我 们 的 网 站 ? 

口 每 天 〇 3 到 4 天 口 每 月 口 每 月 口 更 久 加 这 是 我 第 一 次 访问 








图 15-15 页面 效果 
STEP|07 输入 第 七 题 的 题目 .设置 段落 的 【类 】 为 buttonsSet， 插 入 “提交 ”按钮 和 “ 重 置 ” 按 钮 。 分 


298 








:第 15 章 ， 交 互 页 面 设 计 





别 选中 “提交 ”按钮 和 “ 重 置 ”按钮 ， 在 【属性 】 检 查 器 中 设置 其 ID 为 acceptBtn 和 resetBtn， 为 其 应 用 
样式 ， 再 将 按钮 的 值 设置 为 一 个 空格 .如 图 15-16 所 示 。 
<p> 7。 如 果 没 有 其 他 的 问题 ， 您 就 可 以 单 击 【提交 】 按钮 ,完成 这 
次 问卷 调查 ， 非 常 感谢 您 配合 我 们 的 工作 。 </p> 
<p cla > 





















&nbsp;g&nbsp;& 





</p> 


图 15-16 CSS 样式 代码 


15.3.2 ”实战 :制作 会 员 注 册页 面 








互联 网 对 于 企业 的 生存 发 展 已 不 可 或 缺 。 许 多 网 站 采用 会 员 制 服务 方式 ， 可 以 实行 收费 会 员 制 ， 向 
会 员 提供 多 方位 有 偿 服 务 。 会 员 制服 务 需要 用 户 通过 注册 提交 表单 成 为 该 网 站 的 会 员 。 本 例 将 使 用 表单 
控件 和 Spry 控件 制作 一 个 儿童 乐园 网 站 的 会 员 注册 , 主要 练习 插入 表单 控件 , 表单 控件 的 属性 , 文本 域 、 
单 选 按钮 组 、 复 选 框 组 、 按 钮 和 文 段 集 的 应 用 ，Spry 验证 控件 ，Spry 验证 控件 的 属性 ,如 图 15-17 所 示 。 


多 Mi 
游戏 ”故事 ”动画 


提高 儿童 入 力 。。 培 状 儿 音 的 曙 介 力促 渤 儿 辣 创 迁 力 
用 户 注册 


4 10 个 字符 (包括 小 写字 母 、 数 字 、 下 姓 色 ) 
密码 长 度 为 6-16 位 ， 字 母 请 区 分 大 小 瑟 
请 再 次 输入 您 的 守 码 


一 旦 选择 不 可 更 改 


GE 





密友 提示 问题 : -一 一 请 您 和 反 
密码 提示 回 管 : 请 全 重 填写 ， 并 牢记 
电子 邮箱 : _ 请 输入 正确 3 邮箱 它 将 用 于 密码 保护 











个 人 信息 

真实 姓名 : 
出 生日 期 : 
联系 地 赴 : 








图 15-17 制作 会 员 注 册页 面 





STEP|01 新 建 空白 文档 .在 【属性 】 面 板 中 打开 【页 面 属性 】 对 话 框 ,设置 页 面 字 体 大 小 、 文 本 颜色 和 
标题 等 参数 ， 如 图 15-18 一 图 15-20 所 示 。 











. 
. 
. 











网 页 设计 与 网 站 建设 自学 经 典 :;:: 


网 页 设计 与 网 站 建设 自学 经 典 






































文档 类 型 ER 
= mL | 
-es 
赤 Iss 
[EE 大 和 ETE 
办 scss 
时 Jerseript 
图 Bs 机 析 二 车 文档 类 型: HTMLS 
二 ne 
雪 邓 附加 CSS: Ee 
二 sv ee 
二 ML 模板 
中 PIP 模板 
号 流体 网 格 ( 昌 乒 ) 
念 问 六 时 Extract 从 Photoshop 生计 中 构 和 更 于 
[R02 CE ee 























图 15-18 【新 建文 档 】 对 话 框 


”| 这 本 中 口内 字 体 司 ~ 医 圣 酒 男 














[Cer | |- 











《>IIWL 目标 规则 body 
有 | 编 缉 规 区 
文档 标题 | 注册 页 面 


电击 ”| EGR 





BI 
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图 15-19 【属性 】 面 板 














外 观 Css) 
页 面 字 体 中 ): 器 默认 字体 ~ ~ 加 
大 小 G): 12 < E9 
文本 磊 色 (7): 更 | #666 
背景 基色 8): 加 


背景 图 像 IC): images/beg jpg 
重复 E): no-repeat ~ 





左边 中 om): 0 ”区 右边 距 B): 0 
上 边 距 0): 0 px 下 边 距 D): 


o 











I 
yO 


Em LE 




















图 15-20 【页 面 属性 】 对 话 杠 











STEP|I02 然后 .双击 【属性 】 面 板 中 的 【编辑 规则 】 按钮 ， 在 弹 开 的 【body 的 CSS 规则 定义 】 对 话 框 
的 【背景 】 选 项 卡 中 设置 参数 . 如 图 15-21 和 图 15-22 所 示 。 











《<> wm。 目标 规则 body ”sd ~ 中 ~ 芋 委 等 于 ® 
cs]| CMJ [enee) KS -| 四 
文档 标题 注册 页 面 页 二 属性 














图 15-21 【属性 】 面 板 


而 景 
Backeround-eolor C): [| 


Backer ound-inage IT) imeges/be jpe - 


Backgr ound-repeat (R): no-repeal = 
































Backgr ound-attachaent (1) 下 

Bockeround-position 0); 50 -|% - 
Bouckeround-position O01): 0 -|% 下 

六 了 m00 ] [ER ER [ER 








图 15-22 【body 的 CSS 规则 定义 〗 对 话 框 


STEP|03 在 页 面 中 插入 一 个 ID 为 container 的 层 并 设置 其 CSS 样式 . 并 

在 该 层 中 插入 一 个 人 D 为 nav 的 层 ， 定 义 其 CSS 样式 , 如 图 15.23 所 示 。 “otainer 全 
STEP|04 在 ID 为 nav 的 层 中 插入 一 个 2 行 x5 列 的 表格 。 选 中 并 合并 表 margin-top: 21f 
格 中 第 1 行 第 1 列 至 第 1 行 第 5 列 的 单元 格 ， 在 各 个 单元 格 中 插入 导航 图 position: retative 
像 并 为 图 像 创建 链接 ， 如 图 15-24 所 示 。 } 

STEP|05 在 ID 为 nav 的 层 下 面 插入 一 个 ID 为 main 的 层 , 并 定义 该 层 的 #nav { height: 168px; } 
CSS 样式 。 然后， 在 该 层 中 输入 标题 文字 “用 户 注册 ”在 【属性 】 面 板 

中 设置 【格式 】 为 “h6”， 并 在 【CSS 样式 】 面 板 中 为 该 标签 定义 样式 ， “图 15-23 CSS 样式 代码 
如 图 15-25 所 示 。 



































EE 来 格 行 m2z | 殉 Wlio | =] culpsan im[ 革 从 <] Quss 无 巴 
~ caa5 alspace 0 Border 0 
mum Ms ee 
5 





图 15-24 【局 性 〗 面 板 





STEP|06 在 ID 为 main 的 层 中 插入 一 个 为 login 的 层 ， 并 定义 该 层 的 CSS 样式 ， 如 图 15-26 所 示 。 
单 击 【 表 单 】 选 项 卡 中 的 【表单 】 按 钮 ， 在 该 层 中 插入 一 个 表单 。 然 后 ， 继 续 单 击 【 字 段 集 】 按 钮 ， 并 
在 弹出 的 对 话 框 中 输入 “基本 信息 ( 必 填 写 ) 。 
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网 页 设计 与 网 站 建设 自学 经 典 




















padding :auto + 一 属性 

本 中 加 

中 一 前 局 

布局 

im 
一 margin : 认可 前 这 
文本 15 px 
lt 国 
font-se 于 
line-heght 30 ph 45 px [ea 45 px 
text-aln 国 
国 更 多 0 px 
background pf 
图 15-25 CSS 样式 属性 图 15-26 属性 


STEP|07 将 光标 放置 在 文本 “基本 信息 ( 必 填 写 )” 后 , 按 Enter 键 , 文本 换行 并 在 【CSS 样式 】 面 板 中 
为 段落 标签 定义 样式 。 然 后 ， 单 击 【表单 】 选 项 卡 中 的 【Spry 验证 文本 域 】 按 钮 ， 在 该 字段 集中 插入 一 
个 Spry 验证 文本 域 控件 并 在 【属性 】 面 板 中 设置 【最 小 字符 数 】 为 4.【 最 大 字符 数 】 为 10， 如 图 15-27 
所 示 。 























EE pv 负 型 无 了 ] mw [WD = 总 
TRY | -验证 于 局 on8lur 让 onChange onSubmit 
EX Widoel 本 于 及 少子 特 歼 《| 最 个 重 | | 局 必要 的 
要 示 县 大 字 笠 数 10 最大 值 强制 模式 内 





图 15-27 【属性 〗】 面 板 


STEP|08 在 “昵称 ”下 面 插入 一 个 Spry 验证 密码 控件 并 在 【属性 】 面 板 中 设置 该 控件 的 属性 。 使 用 相 
同 的 方法 ,在 该 Spry 验证 密码 控件 下 面 插入 一 个 Spry 验证 确认 控件 并 在 【属性 】 面 板 中 设置 参数 ,如 图 
15-28 所 示 。 














图 15-28 【属性 】 面 板 


STEP|I09 在 “重复 密码 ”下 面 插入 一 个 Spry 单 选 按钮 组 控件 并 在 【属性 】 面 板 中 设置 该 控件 的 属性 。 
然后 . 在 “性 别 ” 下 面 输入 文本 并 插入 头像 。 按 Enter 键 后 . 单 击 【 表 单 】 选 项 卡 中 的 【文件 域 】 按 钮 
在 表单 中 插入 一 个 文件 域 ， 如 图 15-29 和 图 15-30 所 示 。 


























图 15-29 【属性 】 面 板 


]4-10 个 字符 (包括 小 瑟 字 母 、 数 字 、 下 划 线 ) 
密码 长 度 为 6-16 位 ,字母 请 区 分 大 小 写 
请 再 次 输入 您 的 密码 
一 旦 选择 不 可 更 改 

















-Ci | 


] 请 愤 重 填写 ， 并 牢记 
请 输入 正确 的 邮箱 它 将 用 于 密码 保护 








图 15-30 页 面 效果 


STEP|10 使 用 相同 的 方法 ， 在“ 自 定义 头像 ”下 面 插入 一 个 字段 集 。 然 后 ,在 该 字段 集中 插入 一 个 Spry 
验证 选择 控件 并 在 【属性 】 面 板 中 启用 【验证 于 】 选 项 中 的 onBlur 复 选 框 。 然 后 ,选择 【列表 /菜单 】 之 
后 ， 在 【属性 】 面 板 中 打开 【列表 值 】 对 话 框 ， 并 设置 参数 ， 如 图 15-31 和 图 15-32 所 示 。 
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图 15-31 【属性 】 面 板 

















图 15-32 【列表 值 〗 对 话 框 


STEP|TI 在 “密码 提示 问题 ”下 面 依次 插入 两 个 Spry 验证 文本 域 控件 。 然 后 , 选择 第 二 个 控件 . 在 【 属 
性 】 面 板 的 【类 型 】 下 拉 列 表 中 选择 【电子 邮箱 地 址 】 选 项 ， 如 图 15-33 所 示 。 
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[下 Spy 文本 总 。。。 和 至 [电子 由 件 地 直 了 ] 现 攻 着 [无 小 相 式 了 多 
prytextfiaal 。 区 袜 -~ 独 证 于 加 onBlur 门 onChange onSubmit 
自在 勾 此 Widasl 时 ] 最 相 子 特 败 | | 又 直 全。 | 局) 必 归 的 
提示 _ 最 大 子 柠 数 要 大 和 站 强制 模式 





图 15-33 【属性 】 面 板 





STEP|I12 继续 在 “电子 邮箱 ”下 面 插入 1 个 字段 集 。 然 后 ， 在 该 字段 集中 插入 两 个 Spry 验证 文本 域 控 





件 并 依次 在 【属性 】 面 板 中 设置 参数 ， 如 图 15-34 所 示 。 














[EPpy 二 。 sm 区 了 ] 天 故居 而 [拉手 =] 区 
Torytextfield 阁下 -验证 于 局 onBlur[ onChange ”onSubmit 
ME Widoet 图 案 最 小 字符 数 2 天 个 值 同 要 的 
提示 | 大 子 特 数 【县 大 全 | 强制 模式 








图 15-34 【属性 】 面 板 


STEP|13 在 “出 生日 期 ”下 面 分 别 插入 两 个 文本 域 和 两 个 按钮 。 然 后 在 ID 为 main 的 
为 footer 的 层 ， 定义 其 CSS 样式 并 输入 版 权 信息 ， 如 图 15-35 和 图 15-36 所 示 。 
| 自 定义 头像: 浏览 .…… 














请 情 重 填写 ， 并 定 记 
请 输入 正确 8 邮箱 它 将 用 于 密码 保护 








图 15-35 页 面 效果 


#footer { 
background: unl ages/footer .jpg); 
color: # 1 
text-align: r ,4 
height: 3ipx; 
padding-top: i160px; 


图 15-36 CSS 样式 代码 





层 下 面 插入 一 个 卫 


框架 (Framework) 是 一 个 基本 概念 上 的 结构 用 于 解决 或 者 处 理 复杂 的 问题 。 这 个 广泛 的 定义 使 用 
得 十 分 流行 ， 尤 其 在 软件 概念 ， 框 架 也 能 用 于 机 械 结构 ， 网 页 框架 是 网 页 设计 中 经 常 使 用 的 方式 之 一 。 
通过 框架 可 以 在 一 个 浏览 器 窗口 下 将 网 页 划分 为 多 个 区 域 ， 而 每 一 个 区 域 显 示 单独 的 网 页 ， 这 样 就 实现 
了 在 一 个 浏览 器 窗口 中 显示 多 个 页 面 。 使 用 框架 可 以 非常 方便 地 完成 导航 工作 ,让 网 站 的 结构 更 加 清晰 ， 
而 且 各 个 框架 之 间 互 不 影响 。 

本 章 将 详细 介绍 网 页 中 的 网 页 框架 应 用 .主要 内 容 有 创建 框架 集 、 选 择 框架 、 框 架 集 、 框 架 属性 、 
框架 标签 和 综合 实战 。 通 过 本 章 的 学 习 我 们 可 以 了 解 各 种 类 型 的 框架 ,以 及 框架 和 框架 集 的 创建 和 使 用 
方法 ,在 网 页 中 灵活 运用 框架 或 框架 集 。 
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创建 框架 集 








框架 集 在 网 页 中 是 非常 重要 的 ， 在 Dreamweaver 中 创建 框架 集 有 两 种 方法 : 一 种 是 预定 义 框架 集 , 
另 一 种 是 自 定义 框架 集 。 预 定义 框架 集 是 快速 创建 框架 布局 页 面 最 简单 的 方法 。 本 节 主 要 讲述 如 何在 网 
页 中 创建 预定 义 框架 集 和 自 定义 框架 集 。 用 户 通 过 本 章 的 学 习 可 以 为 后 面 的 网 站 建设 奠定 基础 。 


16.1.1 创建 预定 义 框架 集 


选择 预定 义 的 框架 集 能 够 为 页 面 布 局 创建 所 需 的 框架 和 框架 集 ， 它 是 快速 创建 框架 布局 页 面 最 简单 
的 方法 。 打 开 Dreamweaver， 执 行 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 【新 建文 档 】 对 话 框 中 单 击 【示例 
中 的 页 】 选 项 卡 ， 在 【示例 文件 夹 】 列表 中 选择 【框架 页 】 选 项 ， 然 后 在 【示例 页 】 列 表 中 选择 一 种 布 
局 框架 。 

除了 可 以 直接 创建 基于 框架 布局 的 网 页 文档 外 ， 还 可 以 在 现 有 文档 中 插入 预定 义 框架 集 。 将 光标 置 
于 文档 中 的 任意 位 置 , 执行 【插入 】IHTMLI【 框 架 】 命 令 . 或 者 单 击 【插入 】 面 板 【 布 局 】 选 项 卡 中 【 框 
架 】 按 钮 右 侧 的 下 三 角 按钮 图 标 ， 在 弹出 的 列表 中 选择 所 需 的 预定 义 框架 集 。 在 默认 情况 下 ， 当 选择 预 
定义 的 框架 集 后 会 弹出 【框架 标签 辅助 功能 属性 】 对 话 框 ， 在 该 对 话 框 中 可 以 为 框架 集中 的 每 一 个 框架 
(Frame) 设置 标题 名 称 。 


16.1.2 创建 自 定义 框架 集 


如 果 所 有 预定 义 的 框架 集 并 不 能 满足 设计 的 需求 ， 则 还 可 以 创建 自 定义 的 框架 集 。 将 光标 置 于 文档 
中 ,执行 【修改 】| 【框架 集 】 命 令 ， 在 弹出 的 菜单 中 选择 相应 的 【 拆 分 项 】 子 命令 ,如 【 拆 分 上 框架 】、 
【 拆 分 左 框架 】 等 。 可 以 重复 执行 这 些 命令 ， 直 至 达到 所 需 的 框架 集 。 


| 允 骨 选择 框架 和 框架 集 


在 更 改 框架 或 框架 集 的 属性 之 前 ,首先 要 选择 该 框架 或 框架 集 。 用 户 可 以 在 【文档 】 窗 口中 选择 框 
架 或 框架 集 , 也 可 以 通过 【框架 】 面 板 进行 选择 。 本 节 主 要 讲述 如 何在 【框架 】 面 板 中 选择 和 如 何在 【 文 
档 】 窗 口中 选择 。 用 户 通过 本 章 的 学 习 可 以 为 后 面 的 网 站 建设 奠定 基础 。 


16.2.1 在 【框架 】 面 板 中 选择 


【框架 】 面 板 提供 框架 集 内 各 个 框架 的 可 视 化 表示 形式 . 它 能 够 显示 框架 集 的 层次 结构 . 而 这 种 层次 
结构 在 【文档 】 窗 口中 的 显示 可 能 不 够 直观 。 在 文档 中 执行 【窗口 】| 【框架 】 命 令 . 打开 【框架 】 面 板 . 
在 该 面板 中 可 以 选择 整个 框架 集 或 者 其 所 包含 的 各 个 框架 。 如 果 要 选择 整个 框架 集 ， 可 以 单 击 环绕 框架 
集 的 边框 。 如 果 要 选择 框架 集中 的 某 个 框架 ， 则 直接 单 击 【 框 架 】 面 板 中 所 对 应 的 框架 区 域 即 可 。 当 选 
择 后 .框架 的 周围 会 显示 一 个 选择 轮廓。 
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16.2.2 在 【文档 】 窗 口中 选择 


在 【文档 】 窗 口 的 【设计 】 视 图 中 选择 一 个 框架 后 ， 其 边框 被 虚线 环绕 ， 当 选择 一 个 框架 集 后 ,该 
框架 集 内 各 个 框架 的 所 有 边框 都 被 淡 颜 色 的 虚线 环绕 。 

在 文档 的 【设计 】 视 图 中 ， 同 时 按 住 Shift 和 Alt 键 不 放 . 单 击 框架 集中 所 要 选择 的 框架 区 域 ， 即 可 
选择 该 框架 。 如 果 要 选择 整个 框架 集 ， 可 以 在 【设计 】 视 图 中 单 击 框架 集 的 内 部 框架 边框 ， 也 可 以 单 击 
框架 集 四 周 的 边框 。 


| 天 是 框架 属性 


框架 作为 HTML 语言 的 一 部 分 ， 在 网 页 制作 中 占据 着 重要 的 地 位 。 就 好 像 Windows 下 的 资源 管理 
器 一 样 ， 在 左 单 击 相 应 的 链接 ， 右 边 就 会 有 相应 的 网 页 显示 。 本 节 主 要 讲述 4 个 方面 的 内 容 ， 分 别 是 设 
置 框架 集 属性 、 设 置 框架 属性 、 保 存 框架 和 框架 集 文件 、 设 置 框架 链接 。 用 户 通 过 本 章 的 学 习 可 以 为 后 
面 的 网 站 建设 商定 基础 。 
16.3.1 设置 框架 集 属性 

使 用 【属性 】 检 查 器 可 以 查看 和 设置 大 多 数 框 架 集 的 属性 ， 如 框架 集 标题 、 边 框 和 框架 大 小 等 。 在 
文档 中 选择 整个 框架 集 后 ,【 属 性 】 检 查 器 将 会 显示 该 框架 集 的 各 个 选项 。 框 架 集 的 【属性 】 检 查 器 中 的 
各 个 选项 的 名 称 及 作用 如 表 16-1 所 示 。 

表 16-1 框架 集 的 【属性 】 检 查 器 中 的 选项 及 作用 





















































选项 名 称 说 明 
边框 指定 在 浏览 器 中 查看 文档 时 是 否 显示 框架 周转 的 边框 
边框 宽度 指定 框架 集中 所 有 边框 的 宽度 。 数 字 0 表示 无 边框 
边框 颜色 设置 边框 的 颜色 。 使 用 【颜色 选择 器 】〗 选 择 一 种 颜色 ,或 者 输入 颜色 的 十 六 进 制 值 
行列 选 定 范围 单 击 【 行 列 选 定 范围 】 区 域 中 的 选项 卡 ， 可 以 选择 文档 中 相应 的 框架 
行 / 列 设置 行 高 或 者 列 宽 ， 单 位 可 以 选择 像素 、 百 分 比 和 相对 
像素 将 选择 的 列 或 行 的 大 小 设置 为 一 个 绝对 值 。 对 于 应 始终 保持 相同 大 小 的 框架 来 说 ， 
该 选项 是 最 佳 选择 
百分比 指定 选择 列 或 行 就 为 相对 于 其 框架 集 的 总 宽度 或 总 高 度 的 一 个 百分比 
ee 指定 在 为 像素 和 百分比 框架 分 配 空间 后 ， 为 选择 列 或 行 分 配 其 余 可 用 空间 。 剩 余 空 


间 在 大 小 设置 为 【相对 】〗 的 框架 之 间 按 比例 划分 





在 【属性 】 检 查 器 中 ， 单 击 【 行 列 选 定 范围 】 区 域 的 【 行 】 或 【 列 】 选 项 卡 ， 可 以 在 【 值 】 文 本 框 
中 输入 数值 ， 以 设置 选择 行 或 列 的 大 小 。 


16.3.2 ”设置 框架 属性 


使 用 【属性 】 检 查 器 可 以 查看 和 设置 大 多 数 框架 属性 ， 包括 边框 、 边 距 以 及 是 否 在 框架 中 显示 滚动 
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条 。 选 择 框架 集中 的 某 一 个 框架 .【 属 性 】 检 查 器 将 会 显示 该 框架 的 各 个 选项 。 
框架 的 【属性 】 检 查 器 中 的 各 个 选项 的 名 称 及 说 明 如 表 16-2 所 示 。 


表 16-2 框架 【属性 】 检 查 器 中 的 选项 及 作用 











选项 名 称 说 明 

链接 的 target 属性 或 脚本 在 引用 框架 时 所 使 用 的 名 称 。 框架 名 称 必须 是 一 个 以 字母 开 

框架 名 称 头 的 单词 ， 允 许 使 用 下 划 线 “”， 但 不 允许 使 用 连 字 符 “-”、 和 句点 “或 空格 。 框架 名 称 
区 分 大 小 写 

源 文件 指定 在 框架 中 显示 的 源 文件 ， 可 以 直接 输入 源 文件 的 路 径 或 单 击 文件 夹 图 标 浏览 并 
选择 一 个 文件 
指定 在 框架 中 是 否 显示 滚动 条 。 将 该 选项 设置 为 【默认 将 不 设置 相应 属性 的 值 ， 

滚动 从 而 使 各 个 浏览 器 使 用 其 默认 值 。 大 多 数 浏览 器 默认 为 【自动 〗， 表 示 只 有 在 浏览 器 
窗口 中 没有 足够 空间 来 显示 当前 框架 的 完整 内 容 时 才 显 示 滚动 条 

不 能 调整 大 小 启用 该 复 选 框 ， 可 以 防止 用 户 通过 拖 动 框架 边框 在 浏览 器 中 调整 框架 大 小 
指定 在 浏览 框架 时 显示 或 隐藏 当前 框架 的 边框 。 大 多 数 浏览 器 默认 为 显示 边框 ， 除 

边框 非 父 框架 集 已 将 【边框 选项 设置 为 【 否 ]。 为 框架 选择 【边框 | 选项 将 禾 盖 框架 集 
的 边框 设置 

边框 颜色 指定 所 有 框架 边框 的 颜色 。 该 颜色 应 用 于 和 框架 接触 的 所 有 边框 ， 并 且 重 写 框架 集 
的 指定 边框 颜色 

边 距 宽度 以 像素 为 单位 设置 左边 距 和 右边 距 的 宽度 (框架 边框 与 内 容 之 间 的 距离 ) 

边 距 高 度 以 像素 为 单位 设置 上 边 距 和 下 边 距 的 高 度 〈 框 架 边框 与 内 容 之 间 的 距离 ) 


16.3.3 ”保存 框架 和 框架 集 文件 


在 浏览 器 中 预览 框架 集 前 ， 必 须 保存 框架 集 文件 以 及 要 在 框架 中 显示 的 所 有 文档 。 可 以 单独 保存 杠 
架 集 文档 和 每 个 框架 文件 ,也 可 以 同时 保存 框架 集 文档 和 框架 中 出 现 的 所 有 文档 。 在 【文档 】 窗 口 或 【 框 
架 】〗】 面 板 中 选择 框架 集 ， 执 行 【文件 】|【 保 存 框架 页 】 命 令 ， 即 可 保存 框架 集 文件 。 如 果 要 保存 单个 杠 
架 文档 ， 首 先 在 【文档 】 窗 口中 单 击 该 框架 区 域 的 任意 位 置 ， 然 后 执行 【文件 】|【 保 存 框架 页 】 命 令 ， 
即 可 保存 该 框架 中 所 包含 的 文档 。 

在 浏览 器 中 预览 框架 集 前 ， 必 须 保存 框架 集 文件 以 及 要 在 框架 中 显示 的 所 有 文档 。 可 以 单独 保存 杠 
架 集 文档 和 每 个 框架 文件 . 也 可 以 同时 保存 框架 集 文档 和 框架 中 出 现 的 所 有 文档 。 在 【文档 】 窗 口 或 【 框 
架 】 面 板 中 选择 框架 集 ， 执行 【文件 】| 【保存 框架 页 】〗 命 令 ， 即 可 保存 框架 集 文件 。 


16.3.4 ”设置 框架 链接 


如 果 要 使 用 链接 在 其 他 框架 中 打开 网 页 文档 ， 必 须 设置 链接 目标 。 链 接 的 【目标 】 属 性 指定 打开 所 
链接 内 容 的 框架 或 窗口 。 例 如 .网 页 的 导航 条 位 于 左 框架 ， 如 果 想 要 单 击 链接 后 在 右 侧 的 框架 中 显示 链 
接 文件 ， 这 时 就 需要 将 右 侧 框架 的 名 称 指定 为 每 个 导航 条 链接 的 目标 。 

选择 左 侧 框架 中 的 导航 文字 . 在 【属性 】 检 查 器 中 的 【链接 】 文 本 框 中 输入 链接 文件 的 路 径 , 然后 . 
在 【目标 】 下 拉 列 表 中 选择 要 显示 链接 文件 的 框架 或 窗口 (如 mainFrame)。 在 【属性 】 检 查 器 中 .【 目 标 】 
下 拉 列 表 中 包含 4 个 选项 ， 用 于 指定 打开 链接 文件 的 位 置 ， 这 些 选项 的 名 称 及 作用 介绍 如 表 16-3 所 示 。 
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表 16-3 【目标 】 下 拉 列 表 选 项 













选项 名 称 
在 新 的 浏览 器 窗口 中 打开 链接 的 文件 ， 同 时 保持 当前 窗口 不 变 
在 显示 链接 的 框架 的 父 框架 集中 打开 链接 的 文件 ， 同 时 替换 整个 框架 集 
在 当前 框架 中 打开 链接 的 文件 ， 同 时 替换 该 框架 中 的 内 容 

在 当前 浏览 器 窗口 中 打开 链接 的 文件 ， 同 时 替换 所 有 框架 









设置 完成 后 预览 效果 ， 当 单 击 左 侧 框 架 中 的 导航 链接 时 ， 即 会 在 主要 内 容 框 架 中 显示 链接 文件 
“TianTang.html” 的 内 容 ， 如 图 16-1 所 示 。 











r 
郑 恰当 链接 - Windows Internet Explorer case 
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袜 收 天 御 框 案 锋 接 

















未 知 区 域 (混合 ) | 保护 模式 禁用 入 7 护 100% ~ 








图 16-1 设置 框架 链接 
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创建 框架 集 后 ， 在 【代码 】 视 图 中 可 以 发 现 ， 选 择 单个 框架 和 选择 框架 集 的 代码 是 不 同 的 ， 这 是 因 
为 页 面 所 有 框架 标签 都 需要 放置 一 个 HIML 文档 。 本 节 主 要 讲述 两 个 方面 的 内 容 . 即 fameset 标 答 和 frame 
标签 。 用 户 通过 本 章 的 学 习 可 以 为 后 面 的 网 站 建设 商定 基础 。 


16.4.1 frameset 标签 











frameset 为 框架 集 的 标签 . 它 被 用 来 组 织 多 个 框架 每 个 框架 存 有 独立 的 文档 。 在 其 最 简单 的 应 用 
中 ，frameset 标签 仅仅 会 使 用 rows 或 cols 属性 指定 在 框架 集中 存在 多 少 行 或 多 少 列 .如 图 16-2 所 示 。 
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"http:/ 


<head> 
<aera ht 
<ricley 
</head> 


</body></nofranes, 


</hral> 


<IDOCTYPE heal PUBLIC “-7703C77DTD YH 1.0 Franeset//EN™ 


<htal xmlnscrhtcp://www,w3.org/1999/xhralry 


ramesec] rows="*” cols="136,*" frameborder="no" border="0"> 


/wu v3. 0rg/TR/xhtall/DID/xhrall-franeset. dtd"> 


ttp-equiv="Content-Type” content="text/hral; charsec=utE-B” /> 
franeset 标 签 </title> 


ftFrane” scrolling="No" noresize= 





left.hral” nam 
eftFrane” /> 
right.htal” nane: 





Frane” id="nainFrane” /> 











frameset 标签 中 的 各 个 属性 





属性 名 称 


TOWS 


cols 


framespacing 
frameborder 
border 
bordercolor 


16.4.2 frame 标签 


frame 标签 为 单个 框架 标签 ， 用 来 表示 一 个 框架 。frame 标签 包含 在 frameset 标签 r 


空 标签 ， 如 图 16-3 所 示 。 





图 16-2 frameset 标签 


名 称 和 作用 介绍 如 表 16-4 所 示 。 


表 16-4 frameset 标签 的 属性 
作用 

水 平 划分 框架 集结 构 ， 接 受 整 数值 、 百 分 比 ,“*" 符 号 表示 占用 剩余 的 空间 。 
数值 的 个 数 表示 分 成 的 窗口 数目 并 以 过 号 分 隔 
重 直 划分 框架 集结 构 ， 接 受 整 数值 、 百 分 比 ，"“*#”" 符 号 表示 占用 剩余 的 空间 。 
数值 的 个 数 表示 分 成 的 窗口 数目 并 以 过 号 分 隔 
指定 框架 与 框架 之 间 保 留 的 空白 距离 
指定 是 否 显示 框架 周围 的 边框 ，0 表示 不 显示 ，1 表示 显示 
以 像素 为 单位 指定 框架 的 边框 宽度 
指定 框架 边框 的 颜色 


hh， 并且 该 标签 为 















"http: // 


<head> 


</head> 








<IDOCTYPE html PUBLIC "-//Y3C//DID XHTNL 1.0 Franeset//EN™ 
<htnl xnlns="http: //ww.w3.org/1999/xhtml"> 


<neta http-equiv="Content-Type” content="text/htnl; charset=utf-8" /> 
<title>frame 标 签 </title> 


<frameset rows="*" cols="136,*" frameborder="no” border="0" > 


left.html” nane="leftFrane” scrolling="No” noresize= 


</body></nofranes> 
</hrml> 


wa. WI. org/TR/xhtall/DID/xhtnll-frameset. dtd"> 











图 16-3 frame 标签 


frame 标签 中 的 各 个 属性 名 称 和 作用 介绍 如 表 16-5 所 示 。 
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表 16-5 frame 标签 的 属性 











属性 名 称 作 用 
frameborder 指定 是 否 显示 框架 周转 的 边框 ，0 表示 不 显示 ，1 表示 显示 
longdesc 定义 获取 描述 框架 的 网 页 的 URL， 可 为 那些 不 支持 框架 的 浏览 器 使 用 此 属性 
marginheight 指定 框架 中 的 顶部 和 底部 边 距 ， 其 值 为 整数 与 像素 组 成 的 长 度 值 
marginwidth 指定 框架 中 的 左 侧 和 右 侧 边 距 ， 其 值 为 整数 与 像素 组 成 的 长 度 值 
指定 框架 的 唯一 名 称 。 通 过 设置 名 称 ， 可 以 用 JavaScript 或 VBScript 等 脚本 语 
2 言 来 使 用 该 框架 对 象 
noresize 当 设置 为 noresize 时 ， 用 户 无 法 调整 框架 尺寸 
指定 框架 的 滚动 条 显示 方式 ， 其 属性 值 包 括 auto、no 和 yes。auto 表示 由 浏览 
scrolling 器 窗口 决定 是 否 显示 滚动 条 ，no 表示 禁止 框架 出 现 滚动 条 ，yes 表示 允许 框架 
出 现 滚动 条 
SIc 指定 显示 在 框架 中 的 文件 的 URL, 该 地 址 可 以 是 绝对 路 径 , 也 可 以 是 相对 路 径 





16.5 


本 章 概要 性 地 介绍 了 创建 框架 集 、 选 择 框 架 和 框架 集 、 框 架 属性 和 框架 标签 ， 为 本 书后 续 的 学 习 打 
下 坚实 的 基础 。 主 要 讲述 如 何在 网 页 中 创建 网 页 框架 .制作 吸引 人 的 网 站 的 一 些 方法 和 相关 技术 ， 接 下 
来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进行 实践 。 


16.5.1 ”实战 :制作 天 讯 内 容 管理 系统 页 面 


所 谓 框架 网 页 , 是 将 浏览 器 窗口 分 割 成 若干 个 小 窗口 . 每 个 小 窗口 都 可 以 单独 显示 不 同 的 HIML 文 
件 。 本 例 将 通过 创建 框架 集 和 框架 来 制作 天 讯 内 容 管理 系统 页 面 ， 主 要 练习 创建 框架 集 、 选 择 框 架 和 框 
架 集 、 设 置 框架 和 框架 集 属性 、 保 存 框架 和 框架 集 文件 ， 如 图 16-4 所 示 。 




















a 
是 
a 
是 
日 
a 
是 
是 
时 
是 


图 16-4 制作 天 讯 内 容 管 理 系 统 页 面 


STEPI01 新 建 “top html” 页 面 ， 单 击 【 属 性 】 检 查 器 中 的 【页 面 属性 】 按 钮 ， 在 弹出 的 【页 面 属性 】 
对 话 框 中 设置 参数 ,如 图 16-5 所 示 。 
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网 与 网 站 建设 自学 经 典 


























BELT 











图 16-5 【页 面 属性 〗 对 话 框 





STEP|02 单 击 Div 按钮 .创建 作为 top 的 Div 层 ,并 设置 其 CSS 样式 ， 如 图 16-6 所 示 。 

STEP|03 将 光标 置 于 ID 为 top 的 Div 层 中 ， 单 击 Div 按钮 ， 分 别 创建 ID 为 logo、topRight 的 Div 层 并 
设置 其 CSS 样式 。 然 后 将 光标 置 于 ID 为 logo 的 Div 层 中 ,插入 图 像 “logo.png”， 如 图 16-7 一 图 16-9 
所 示 。 





















#top { 
background-image:url(images/top be.gif); 
width:1 x 
height: 

上 





图 16-6 CSS 样式 代码 
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图 16-8 制作 天 讯 内 容 管理 系统 页 面 





天 讯 内 容 管 理 | Nn | 





图 16-9 制作 天 讯 内 容 管理 系统 页 面 





STEP|04 将 光标 置 于 ID 为 topRight 的 Div 层 . 单 击 Div 按钮. 分 别 创建 ID 为 exit、login 的 Div 层 并 设 
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置 其 CSS 样式 ,然后 将 光标 置 于 ID 为 exit 的 Div 层 中 . 插入 图 像 并 输入 文本 。 单 击 【属性 】 检 查 器 中 的 
【项 目 列表 】 按 钮 ， 按 Enter 键 .出 现下 一 个 项 目 列表 符号 ,在 项 目 列表 符号 后 再 插入 图 像 和 输入 文本 . 
如 图 16-10 一 图 16-13 所 示 。 
#1login { 
width:450px; 
#exit { height:36px3 
width:724Ppx3 float:left; 
a text-align:right; 


padding-top: 8px; 


text-align:right; 
Ee margin-left: 270px; 


padding-right: 26pxj 
} } 


图 16-10 CSS 样式 代码 


图 16-11 CSS 样式 代码 























[ou | 招式 四 无 xv] 类 无 ”BJ 了 运 扬 持 半 标量 加 | @ 
本 SS DD 无。 基站 {mene) FOE) : 
文本 [天主 生 和 erL_0 CE] [ 弘 焉 .-_] 
图 16-12 【属性 】 面 板 
图 16-13 ”页面 效果 
STEP|05 在 标签 栏 选 择 ul 标签 并 设置 其 CSS 样式 属性 ,然后 再 在 标签 栏 选择 标签 并 设置 其 CSS 样式 ， 

















如 图 16-14 所 示 。 
STEP|06 将 光标 置 于 ID 为 login 的 Div 层 中 ,插入 图 像 ， 单 击 【属性 】 检 查 器 中 的 【项 目 列表 】 按 钮 。 
然后 , 按 Enter 键 , 出 现下 一 个 项 目 列表 符号 ， 在 项 目 列表 符号 后 再 输入 文本 ， 以 此 类 推 。 在 标签 栏 选择 
ul 标签 并 定义 其 边 距 、 填 充 、 项 目 列表 样式 的 CSS 样式 。 然 后 .在 标签 栏 选择 标签 并 定义 其 浮动 、 行 
高 、 左 边 距 、 高 等 CSS 样式 ， 完 成 “top.html” 页 面 ， 如 图 16-15 和 图 16-16 所 示 。 

#top EopR| ht Eh ulf 























#top #topRight #exit ul { 
margin: Opx; 
padding: Opx; 
list-style-type: 3; 


List- tie pe none; 


过 
} #top #topRight Re ul LT 


#top #topRight #exit ul 1i { 


float: 


Line-height: 
height: 37px; 


display: 
float: 


margin- teft: 16pxj; 


图 16-14 CSS 样式 代码 





text-align: 
Line-height 
margin-left: 





5px3 


图 16-15 CSS 样式 代码 
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图 16-16 页 面 效 果 


STEP|07 新 建 “left.html” 页面. 单 击 【 插 入 Div 标签 】 按钮 . 创建 力 为 leftmain 的 Div 层 并 设置 其 CSS 
样式 ， 如 图 16-17 所 示 。 

STEP|08 然后 将 光标 置 于 该 层 中 .分别 谋 套 ID 为 topBg、centerBg、buttomBg 的 Div 层 并 设置 其 CSS 
样式 属性 ， 如 图 16-18 和 图 16-19 所 示 。 


























#topBg { 
width:226px3 
height:36px3 
} 
#Leftmain { #centerBg { 
width:226px; width:269px; ee { 
a height:446px; idth:226px; 
hetght:689px5 background-image: url(images/left_body.gif); 村 PX3 
margin-top: 36pxj padding-left: 26px; height:15px; 
} } 
图 16-17 CSS 样式 代码 图 16-18 CSS 样式 代码 图 16-19 CSS 样式 代码 


STEP|09 将 光标 置 于 ID 为 topBg 的 Div 层 中 ， 插 入 图 像 “left_ top.gif  。 将 光标 置 于 ID 为 buttomBg 的 
Div 层 中 ,插入 图 像 “left_ bottom gif  。 然 后 .将 光标 置 于 ID 为 centerBg 的 Div 层 中 ,插入 图 像 并 输入 
文本 ， 如 图 16-20 和 图 16-21 所 示 。 
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图 16-20 【属性 】 面 板 1 





























Sre hes/loft holm af 回回 as 天 ~ 寓 站 220 [sx = 芍 搞 0) ~ 标题 @ 
2D HOA ms 9 - 吗 
0) 目标 (R) 4 
Co bl (a x 
图 16-21 【属性 】〗】 面 板 2 
STEP|10 将 光标 置 于 文本 “系统 设置 ”后 ， 按 Enter 键 并 插入 图 像 及 输入 文本 。 

以 此 类 推 . 分 别 在 “系统 设置 ” 子 选项 的 文本 后 , 按 Enter 键 ， 如 图 16-22 所 示 。 ” 马 a 
STEPI11 使 用 相同 的 方法 , 创建 “内 容 管理 ”选项 下 面 的 子 选项 列表 , 如 图 16-23 加 
所 示 。 目 系统 日 志 管理 
a A 5 Nt Sd 图 片 水 印 设置 
STEP|12 按照 相同 的 方法 设置 会 员 管理 、 退 出 登录 版 块 ， 选 择 图 像 “folder.gif 入江 呈 倍 复 


后 的 文本 ,在 【属性 】 检 查 器 中 单 击 【 粗 体 】 按 钮 。 依 次 选择 文本 ,在 【属性 】 
检查 器 中 设置 链接 为 “# ， 如 图 16-24 和 图 6-25 所 示 。 

STEP|13 在 标签 栏 选择 dl 标签 . 并 设置 其 CSS 样式 属性 。 在 标签 栏 选择 标题 中 的 a 标签. 并 设置 其 CSS 
样式 属性 .然后 在 标签 栏 选择 内 容 中 的 a 标签 . 并 设置 其 CSS 样式 属性 。 在 CSS 样式 中 添加 一 个 复合 属 


图 16-22 页 面 效果 
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性 .光标 滑 过 内 容 时 . 文本 颜色 发 生变 化 ， 如 图 16-26 所 示 。 





已 系统 设置 
目 系统 基本 参数 
系统 用 户 管理 
国 系统 日 志 管理 什 会 员 管 理 
图 片 水 印 设置 国 会 员 添加 
国 系统 错误 修复 六 二 二 和 全 
蕊 内 容 管理 下 会 员 管理 
上 关上 国 会 员 审 核 
文章 发 布 BE 
国文 章 管理 国 会 员 分 组 
文章 审核 蕊 退出 登录 
国 斌 论 管理 
图 16-23 页 面 效果 图 16-24 页 面 效 果 























《ynmL] | 格式 中) [无 了 类 无 TREE ® 
本 cs ID 无 -ls -GB BFO - [3 
文档 标题 无 标 辐 文 簿 页 而 属 性 列表 需 目 














图 16-25 【属性 】 面 板 


STEP|14 新 建 “mainhtml” 页 面 ， 单 击 Div 按钮 . 创建 人 D 为 mainBg 的 Div 层 并 设置 其 CSS 样式 ， 如 
图 16-27 所 示 。 


J#leftmain #centerBg dl dt a { 
color: #144882; 


text-decoration: es 
margin-left: 16px; 





} 
#leftmain Wace pe dddaf 
color: S 
text- re one3 SnainBg { 
margin-left: 16px; width:764px; 
} ight:470 
#leftmain #centerBg dl dd a:hover{ height:47 px 
color: #F68; margin-bottom: 20px; 
Er padding-top: 19pxj; 
text-decoration: none; 
} } 
图 16-26 CSS 样式 代码 图 16-27 CSS 样式 代码 


STEP|15 然后 将 光标 置 于 该 层 中 . 分 别 嵌 套 ID 为 topNav、content 的 Div 层 并 设置 其 CSS 样式 属性 , 如 
16-28 和 图 16-29 所 示 。 























#content { 
background- image:url (im ng)s 
#topNav { background-repeat:no-re 
height:31px; 
padding- left: 26px; 
} } 





图 16-28 CSS 样式 代码 1 图 16-29 CSS 样式 代码 2 
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STEP|16 将 光标 置 于 ID 为 topNav 的 Div 层 中 . 插入 图 像 "nav_10png ， 单 击 【属性 】 面 板 中 的 【项 目 
列表 】 按 钮 ,出现 项 目 列表 符号 。 然 后 将 光标 置 于 图 像 后 按 Enter 键 . 出 现下 一 个 项 目 列表 符号 ， 然 后 插 
入 图 像 ， 以 此 类 推 ， 如 图 16-30 所 示 。 
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图 16-30 【属性 】 面 板 








STEP| 们 在 标签 栏 选择 ul 标签 ， 并 设置 其 CSS 样式 属性 .按照 相同 的 方法 ， 在 标签 栏 选择 标签 ， 并 
设置 其 CSS 样式 属性 ， 如 图 16-31 所 示 。 











#mainBgg #topNav ul { 


margin: 
padding: 
Uist-style-type: ; 

} 

#mainBg #topNav ul li { 
float: ; 

} 


图 16-31 CSS 样式 代码 


STEP|18 选择 图 像 ， 在 【属性 】 检 查 器 中 设置 链接 为 “#"、【 边 框 】 为 0， 然 后 依次 设置 其 他 图 像 链接 。 
将 光标 置 于 ID 为 content 的 Div 层 中 ,分 别 创 建 ID 为 menu、tb、bj 的 Div 层 ,并 设置 其 CSS 样式 属性 
如 图 16-32 一 图 16-34 所 示 。 










































图 他 ,3 ene me Ol ~ 次/m [zx zj 装 扩 加 ~ 村 本 可 
,OmeoA | = 
ho) 目标 四) 
OE bl om 和 
图 16-32 【属性 】 面 板 
#menu { 
width:7 和 
height: 本 
Line-height 二 #bj { a 
color: #1 width:726px; 
border: 1p rfb; margin-top: 16px; 
margin-bott margin-right: auto; 
} margin-bottom: 10px; 
#tb { ; ye 
width:726px; margin-Left: autoj 
margin-bottom: 16px; height: 31px; 
} 
图 16-33 CSS 样式 代码 1 图 16-34 CSS 样式 代码 2 
STEP|19 然后 ， 将 光标 置 于 JD 为 menu 的 Div 层 中 .并 输入 文本 。 将 光标 置 于 IJD 为 也 的 Div 层 中 , 插 
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入 一 个 11 行 x6 列 且 【 宽 】 为 “720 像素 ”的 表格 。 选 择 表格 . 在 【属性 】 面 板 中 设置 【间距 】 为 1, 在 
CSS 样式 中 设置 表格 的 【背景 颜色 】 为 “ 蓝 色 ”(#BBD3EB)。 然 后 选择 所 有 单元 格 ， 在 【属性 】 检 查 器 
中 设置 【背景 颜色 】 为 “和 白色 ”( 丰 FFFFF) ， 如 图 16-35 所 示 。 
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图 16-35 【属性 〗 面 板 


STEP|20 在 CSS 样式 中 创建 一 个 类 名 称 为 tdBg 的 样式 。 将 光标 置 于 第 1 行 第 1 列 单元 格 中 . 在 【属性 】 
检查 器 中 设置 【高 】 为 27、【 类 】 为 dBg、【 水 平 】 对 齐 方 式 为 【居中 对 齐 】]。 然 后 . 依次 设置 第 1 行 后 5 
列 单元 格 的 【类 】 为 tdBg、【 水 平 】 对 齐 方式 为 【居中 对 齐 】]， 并 输入 文本 。 将 光标 分 别 置 于 第 2 行 一 第 
11 行 的 第 1 列 单元 格 中 ， 单 击 【 插 入 】 面 板 【 表 单 】 选 项 中 的 【 复 选 框 】 按 钮 ， 在 【属性 】 检 查 器 中 设 
置 【 水 平 】 对 齐 方式 为 【居中 对 齐 】。 在 后 5 列 单元 格 中 输入 相应 的 文本 , 并 设置 【水 平 】 对 齐 方式 为 【 居 
中 对 齐 】， 如 图 16-36 所 示 。 
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图 16-36 【属性 】 面 板 


STEP|21 选择 第 2 行 -第 11 行 的 第 2 列 单元 格 中 的 文本 ， 在 【属性 】 检 查 器 中 设置 【链接 】 为 “# ， 如 
图 16-37 所 示 。 
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图 16-37 【属性 】 面 板 


STEP|22 然后 ， 在 CSS 样式 中 分 别 设置 a 标签 的 样式 及 复合 标签 ahover 的 样式 ， 如 图 16-38 所 示 。 
al{ 


Color: #144882; 
text-decoration: none; 


} 
a:hover { 

Color: #F663 
} 


图 16-38 CSS 样式 代码 


STEP|23 将 光标 置 于 ID 为 bi 的 Div 层 中 . 插入 图 像 “add.gif ， 单 击 【 属 性 】 检 查 器 中 的 【项 目 列表 ] 
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按钮 ， 出现 项 目 列表 符号 。 然 后 将 光标 置 于 图 像 后 按 Enter 键 .出 现下 一 个 项 目 列表 符号 ， 并 插入 图 像 . 
如 图 16-39 所 示 。 
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图 16-39 【属性 】 面 板 


STEP|24 在 标签 栏 选 择 ul 标签 .设置 其 CSS 样式 属性 。 按 照相 同 的 方法 ， 在 标签 栏 选 择 上 标签 ， 并 设 
置 其 CSS 样式 属性 。 选 择 图 像 ， 在 【属性 】 检 查 器 中 设置 链接 为 “#"、 【边框 】 为 0， 依次 设置 其 他 图 像 
链接 ， 如 图 16-40 和 图 16-41 所 示 。 




















#mainBg #content #bj ul { 
margin: ; 
padding: ; 
list-style-type: 

} 

#mainBg #content #bj ul li { 
float: $ 
width: 74px; 
padding-left: 
height: 

} 


图 16-40 CSS 样式 代码 
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图 16-41 【属性 〗】 面 板 


16.5.2 实战， 制作 儿童 动画 页 面 


在 网 页 制作 过 程 中 ， 有 时 需要 在 某 个 固定 有 限 的 
区 域 中 显示 较 多 的 信息 ， 此 时 就 可 以 使 用 浮动 框架 页 
面 来 实现 。 浮 动 框架 既 可 以 在 网 页 中 插入 ,也 可 以 在 
表格 中 插入 。 本 例 将 通过 创建 浮动 框架 制作 儿童 动画 
页 面 , 主要 练习 插入 Div 层 、 插 入 图 像 、 输 入 文字 和 
创建 浮动 框架 ， 如 图 16-42 所 示 。 
STEP|01 新 建文 档 ， 在 标题 栏 输入 “儿童 动画 剧场 。 















































单 击 【属性 】 检 查 器 中 的 【页 面 属性 】 按 钮 ， 在 弹出 
的 【页 面 属性 】 对 话 框 中 设置 文字 大 小 和 页 面 边 距 . 图 16-42 制作 儿童 动画 页 面 
如 图 16-43 和 图 16-44 所 示 。 



























































图 16-43 【属性 】 面 板 
分 类 外 观 CSS) 
OmD) 页 面 字 体 0): 品 默认 字体 ~ ~ 
ES) 大 小 5): 和 -| 
文本 蔬 色 0): 辐 | 
背景 声色 8): 国 | 
背景 图 像 0 汉中.… 
重复 中) 四 
左边 路 9: 0 。 [ze 右 四 中: 0 [pa 
上 边 距 0): 0 C4 下 边 距 0): 0 [px 
CC 
图 16-44 【页 面 属性 】 对 话 杠 























STEP|02 然后 . 单 击 【 插 入 】 面 板 中 的 Div 按钮 , 创建 ID 为 header 的 Div 层 . 并 设置 其 CSS 样式 属性 ， 





如 图 








16-45 所 示 。 








STEP|03 单 击 Div 按钮 . 创建 为 content 的 Div 层 并 设置 其 CSS 样式 属性 , 然后 , 将 光标 置 
层 中 , 单 击 【 插 入 Div 标签 】 按 钮 ， 分 别 创建 ID 为 leftmain、centermain、rightmain 的 Div 层 ， 并 设置 其 





CSS 样式 属性 ， 如 图 16-46 所 示 。 


#header { 


background-image:ur 


width: 
height 


margin: 


l(images/top.png); 






px; 


lpx; 


9 auto; 


图 16-45 CSS 样式 代码 














该 Div 














#content { 















width: x3 
height px3 
margin:9 auto; 
} 
#1leftmain{ 
} 
#centermain{ 
width:5 
heigh: ] 
float:\ 和 
} 
#rightmain{ 
width:131px; 
} 


图 16-46 CSS 样式 代码 
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STEP|04 将 光标 置 于 ID 为 centermain 的 Div 层 中 ， 单 击 Div 按钮 ,分别 谋 套 ID 为 mainhome、footer 
的 Div 层 , 并 设置 其 CSS 样式 属性 .如 图 16-47 所 示 。 


smainhome{ 
width: 





height: 


} 

Ffooter{ 
background- image: 
height:30px; 
text-align: 


background- repeat: 


图 16-47 CSS 样式 代码 


STEP|05 将 光标 置 于 ID 为 footer 的 Div 层 中 . 输入 文本 。 将 光标 置 于 ID 为 leftmain 的 Div 层 中 , 插入 
图 像 “dog Nav_ 01.png”， 然 后 将 光标 置 于 ID 为 rightmain 的 Div 层 中 ， 插 入 图 像 “dog Nav_ 02.png 。 
选择 图 像 ， 单 击 【属性 】 检 查 器 中 的 【矩形 热点 工具 】 按 钮 .在 图 像 文 本 “儿童 动画 ”上 绘制 一 个 矩形 , 











如 图 16-48 和 图 16-49 所 示 。 
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图 16-48 插入 图 像 “dog Nav_01.png” 
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图 16-49 插入 图 像 “dog Nav_02.png” 


STEP|06 按照 相同 的 方法 在 图 像 文 本 “动画 社区 ”.“ 益 智 教育 “儿童 英语 ”上 绘制 矩形 热点 工具 。 然 
后 设置 “动画 社区 ”文本 的 链接 和 目标 属性 , 如 图 16-50 所 示 。 将 光标 置 于 ID 为 mainhome 的 Div 层 中 ， 
单 击 【 插 入 】 面 板 【 布 局 】 选 项 中 的 下 RAME 按钮 ， 切换 到 【 拆 分 视图 】， 在 代码 模式 中 给 过 ame 元 素 
添加 src、width、height 等 属性 ， 设 置 浮动 框架 ， 代 码 如 下 : 














<iframe width="510" height="320" name="fd" src= 


"main.html"frameborder="0"></iframe></div> 








属性 
图 热点 棋 接 0) [ssh hol 曲 四 基 换 加 
目标 @) fa 世 | 
bE- | 
[NDS | 
图 16-50 【属性 】 面 板 





CSS 的 中 文 全 称 是 层 琶 样式 表 ， 英 文 全 称 是 Cascading Style Sheets。CSS 通过 将 HTML 中 的 格式 化 
指令 提取 到 一 个 独立 的 位 置 , 实现 了 HIML 的 内 容 与 HTML 格式 的 分 离 , 使 得 网 站 建设 者 可 以 很 轻松 地 
维护 和 更 改 网 站 的 呈现 样式 。 样 式 表 通 过 将 网 页 的 内 容 与 格式 化 分 离 ， 不 仅 使 网 站 建设 人员 可 以 轻松 地 
更 改 网 页 的 外 观 ， 网 站 的 用 户 也 可 以 根据 他 们 的 偏好 来 选择 自己 喜欢 的 样式 ， 将 之 应 用 到 HIML 网 页 。 

本 章 将 详细 介绍 网 站 中 的 CSS 样式 ， 主 要 内 容 有 博客 的 栏目 、 博 客 与 传统 网 站 的 区 别 、 博 客 的 布局 
方式 、CSS 基本 语法 、CSS 选择 器 、CSS 选择 方法 、CSS 滤 镜 和 综合 实战 。 通 过 本 章 的 学 习 我 们 可 以 了 


解 什 么 是 CSS 样式 。 
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国 疡 曾 博 客 的 栏 上 


博客 (blog) 是 继 电 子 邮件 、 讨 论 组 和 论坛 、 即 时 通信 软件 之 后 的 第 4 种 网 络 交流 方式 。 博 客 网 站 
凭借 其 互动 性 、 便 捷 性 .不 断 满足 不 同人 群 在 互联 网 上 展示 自己 的 愿望 . 聚集 了 很 高 的 人 气 。 博 客 比 传 
统 的 静态 网 站 更 加 吸引 人 ， 在 浏览 者 每 次 访问 时 . 博客 都 会 提供 最 新 的 内 容 ， 越 来 越 多 的 人 热衷 于 开创 
个 人 博客 。 本 节 主 要 讲述 三 个 方面 的 内 容 ， 分 别 为 网 络 日 志 、 网 络 相册 和 音乐 收藏 。 用 户 通 过 本 节 的 学 
习 可 以 创建 博客 网 站 ,为 后 面 的 网 站 建设 商定 基础 。 


17.1.1 网 络 日 志 


网 络 日 志 类 似 于 航海 日 志 或 者 个 人 日 记 。 个 人 博客 中 的 网 络 日 志 用 于 记录 个 人 的 所 见 、 所 闻 和 所 想 
等 ,并且 希望 与 他 人 分 享 。 网 络 日 志 包括 标题 、 发 布 时 间 和 内 容 等 部 分 ， 如 图 17-1 所 示 。 
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图 17-1 网 络 日 志 


17.1.2 网络 相册 


网 络 相册 是 博客 的 重要 组 成 部 分 ， 用 于 发 布 博客 用 户 收集 的 图 片 、 照 片 等 信息 ， 这些 内 容 也 可 以 与 
他 人 分 享 。 网 络 相册 扩充 了 博客 的 功能 ， 并且 增 加 了 博客 的 多 媒体 色彩 ， 如 图 17-2 所 示 。 








Pro rr 


和 FT 
图 片 列表 月 于 各 二 天 丘 估 


图 17-2 ”网 络 相册 


17.1.3 音乐 收藏 
音乐 收藏 也 是 博客 的 扩充 功能 . 用 于 收藏 用 户 喜爱 的 音乐 .便于 用 户 在 博客 中 查找 和 收听 音乐 。 当 











322 








第 17 章 CSS 样式 





然 .也 便于 博客 用 户 将 自己 喜爱 的 音乐 与 他 人 分 享 。 随 着 提供 音乐 收藏 的 博客 服务 提供 商 越 来 越 多 . 音 
乐 收藏 逐渐 成 为 博客 一 个 重要 的 组 成 部 分 ， 如 图 17-3 所 示 。 





言 | 起 l" 二 家 |" 于 32|e | 几 用 时 7.609 炙 | 者 恕 各 
4 IEEG EE 本 ,入 本 后 利落 斩 、 现 医 国 ,eap。 = 由 扮 “By 
音乐 仿 首页 | 








铭 半 所 也 车” 宁 辣 主 人 还 未 天 加 任 朵 音乐 人 项 








图 17-3 音乐 收藏 


I 已 必 博客 与 传统 网 站 的 区 别 


博客 是 传统 个 人 主页 和 个 人 网 站 的 发 展 和 延伸 ， 是 一 个 集成 了 站 点 新 闻 、 留 言 板 系统 ， 论 坛 系统 的 
简易 站 点 。 博 客 与 传统 个 人 主页 和 网 站 相 比 ， 有 以 下 优点 ， 互动 性 更 强 、 内 容 更 自由 和 发 布 信息 简单 。 
用 户 通过 本 节 的 学 习 可 以 为 后 面 的 网 站 建设 奠定 基础 。 


17.2.1 ”互动 性 更 强 


博客 通常 支持 留言 板 功 能 ,并且 可 以 对 文章 或 者 照片 进行 评论 ,博客 用 户 与 浏览 者 之 间 可 以 进行 互 
动 对 话 。 博 客 的 出 现 ， 使 网 上 信息 不 再 是 单 向 的 发 布 与 接收 ,而 转变 为 双向 的 交流 ， 如 图 17-4 所 示 。 




















图 17-4 互动 性 更 强 


17.2.2 内容 更 自由 
博客 是 一 个 展示 自我 的 平台 ， 因 此 博客 没有 固定 的 格式 主题 限制 ， 同 一 博客 中 的 两 篇 文章 可 能 没有 
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任何 联系 。 博 客 中 的 文字 也 没有 统一 标准 . 用户 可 以 使 用 一 些 口语 化 语句 . 很 多 在 聊天 中 所 使 用 的 词汇 
都 可 以 套用 在 博客 中 ， 如 图 17-5 所 示 。 
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图 17-5 内 容 更 自由 


17.2.3 发 布 信息 简单 


在 博客 中 发 布 信息 和 在 论坛 中 一 样 简单 ， 而 在 发 布 过 程 中 ， 用 户 可 像 操作 Word 一 样 直接 对 文本 进 
行 编辑 或 者 排版 。 除 此 之 外 ， 用 户 还 可 以 对 博客 中 已 发 布 的 文章 进行 分 类 、 修 改 ， 以 及 设置 关键 字 等 操 
作 ， 既 方便 了 用 户 对 文章 的 管理 ， 也 使 浏览 者 能 够 以 最 快 的 速度 找到 需要 的 信息 。 


了 后 量 博 客 的 布局 方式 


虽然 博客 在 各 方面 没有 太 多 的 限制 ， 但 大 部 分 博客 和 传统 网 页 一 样 有 着 固定 的 几 种 布局 方式 。 本 节 
主要 讲述 博客 的 三 种 布局 方式 ， 即 上 下 结构 布局 、 左 右 结构 布局 和 左 中 右 结构 布局 。 用 户 通过 本 节 的 学 
习 可 以 更 深入 地 了 解 并 掌握 博客 的 布局 方式 .为 后 面 的 网 站 建设 奠定 基础 。 


17.3.1 上 下 结构 布局 


下 结构 布局 的 博客 通常 是 将 网 页 分 为 导航 和 正文 信息 两 大 部 分 ， 最 上 方 是 网 站 的 导航 部 分 ， 下 方 
是 栏目 的 内 容 部 分 和 一 些 辅助 的 工具 ,如 日 历 、 友 情 链 接 等 。 上 下 结构 布局 的 博客 优点 和 缺点 同样 明显 ， 
其 优点 是 结构 层次 分 明 . 制作 相对 简单 ， 缺点 则 是 缺乏 个 性 与 特色 。 大 多 数 博客 都 使 用 上 下 结构 布局 
如 图 17-6 所 示 。 
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图 17-6 上 下 结构 布局 
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17.3.2 左右 结构 布局 


左右 结构 布局 的 博客 事实 上 是 将 导航 条 放 在 了 网 页 的 左 侧 ， 其 他 与 上 下 结构 基本 相同 。 将 网 页 的 导 
航 移动 到 左 侧 的 更 改 . 使 博客 比 大 多 数 博客 更 加 个 性 和 张扬 。 也 更 能 突出 博客 的 设计 风格 。 左 右 结构 布 
局 的 博客 模板 比较 少 ， 因 此 大 多 数 左 右 结构 布局 的 博客 都 是 独立 博客 ， 如 图 17-7 所 示 。 












生花 4 了 可 是 于 辣 计量 己 纸 是 外 星 音 泣 了 ， 真 且 和 年 过 
局 HF 








图 17-7 左右 结构 布局 


17.3.3 左 中 右 结构 布局 


左 中 右 结构 布局 在 网 站 中 使 用 较 多 ， 但 是 在 博客 中 却 是 一 种 新 兴 的 布局 方式 。 不 少 QQ 空间 用 户 喜 
欢 使 用 这 种 结构 布局 。 左 中 右 结 构 布局 突破 了 一 些 规则 ， 将 图 像 和 栏目 内 容 进行 巧妙 的 规划 ， 制 作出 的 
博客 相当 独特 ， 如 图 17-8 所 示 。 
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图 17-8 左 中 右 结构 布局 
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作为 一 种 网 页 的 标准 化 语言 . CSS 有 着 严格 的 书写 规范 和 格式 。 本 节 主 要 讲述 CSS 基本 语法 . 分 为 
4 个 方面 的 内 容 . 分 别 为 基本 组 成 、 书 写 规范 、 注 释 和 文档 的 声明 、CSS 绝对 和 相对 长 度 单位 。 用 户 通过 
本 节 的 学 习 可 以 了 解 和 掌握 CSS 基本 语法 的 应 用 . 为 后 面 的 网 站 建设 奠定 基础 。 
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17.4.1 基本 组 成 
一 条 完整 的 CSS 样式 语句 包括 以 下 几 个 部 分 : 


selectort{ 
property:value 


} 


在 上 面 的 代码 中 ， 各 关键 词 的 含义 如 下 所 示 。 

(1) selector (选择 器 ) : 其 作用 是 为 网 页 中 的 标签 提供 一 个 标识 ， 以 供 其 调用 。 

(2) property (属性 ) : 其 作用 是 定义 网 页 标签 样式 的 具体 类 型 。 

(3) value (属性 值 )， 属性 值 是 属性 所 接受 的 具体 参数 。 

在 任意 一 条 CSS 代码 中 .通常 都 需要 包括 选择 器 . 属性 以 及 属性 值 这 三 个 关键 词 ( 内 联 式 CSS 除外 ) 。 


17.4.2 书写 规范 
虽然 杂乱 的 代码 同样 可 被 浏览 器 判读 ,但 是 书写 简洁 、 规 范 的 CSS 代码 可 以 给 修改 和 编辑 网 页 带 来 














1. 单位 的 使 用 

在 CSS 中 , 如 果 属 性 值 是 一 个 数字 ,那么 用 户 必须 为 这 个 数字 安排 一 个 具体 的 单位 ， 除 非 该 数字 是 
由 百分比 组 成 的 比例 ,或 者 数字 为 0。 例如, 分别 定义 两 个 层 , 其 中 第 1 个 层 为 父 容器 ， 以 数字 属性 值 为 
宽度 ， 而 第 2 个 层 为 子 容器 ， 以 百分比 为 宽度 。 

















#parentContainer{ 
width:1003px 

} 

#childrenContainert{ 
width:50% 

. 


2. 引号 的 使 用 
多 数 CSS 的 属性 值 都 是 数字 值 或 预先 定义 好 的 关键 字 ， 然而， 有 一 些 属性 值 则 是 含有 特殊 意义 的 字 
符 串 。 这 时 ， 引 用 这 样 的 属性 值 就 需要 为 其 添加 引号 。 典 型 的 字符 串 属 性 值 就 是 各 种 字体 的 名 称 。 





span{ 
font-family: "微软 雅 黑 " 
} 


3. 多 重 属 性 
如 果 在 这 条 CSS 代码 中 ， 有 多 个 属性 并 存 ， 则 每 个 属性 之 间 需 要 用 分 号 “;” 隔 开 。 


.content{ 
color:#999999; 
font-family:" 新 宋体 "; 
font-size:14px; 


} 
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4. 大 小 写 敏感 和 空格 

CSS 与 VBScript 不 同 ， 对 大 小 写 十 分 敏感 。mainText 和 MainText 在 CSS 中 是 两 个 完全 不 同 的 选择 
器 。 除 了 一 些 字符 串 式 的 属性 值 (如 英文 字体 "MS Serf* 等 ) 以 外 ，CSS 中 的 属性 和 属性 值 必 须 小 写 。 为 
了 便于 判读 和 纠 错 ， 建 议 在 编写 CSS 代码 时 ， 在 每 个 属性 值 之 前 添加 一 个 空格 。 这 样 ， 如 果 某 条 CSS 属 
性 有 多 个 属性 值 ， 则 阅读 代码 的 用 户 可 方便 地 将 其 区 分 开 。 


17.4.3 ”注释 和 文档 的 声明 


与 多 数 编程 语言 类 似 . 用 户 也 可 以 为 CSS 代码 进行 注释 . 但 与 同样 用 于 网 页 的 XHTML 语言 注释 方 
式 有 所 区 别 。 在 CSS 中 . 注释 以 斜 枉 “/” 和 星 号 “* ”开头 ， 以 星 号 “* ”和 和 斜 枉 “/” 结 尾 。 














-text{ 
font-family: "微软 雅 黑 "; 
font-size:12px; 
/*color:#ffcc00;*/ 

2 


CSS 的 注释 不 仅 可 用 于 单行 ,也 可 用 于 多 行 。 

在 外 部 CSS 文件 中 ， 通 常 需要 在 文件 的 头 部 创建 CSS 的 文档 声明 ， 以 定义 CSS 文档 的 一 些 基本 属 
性 。 在 多 数 CSS 文档 中 ， 都 会 使 用 “@charset ”声明 文档 所 使 用 的 字符 集 。 除 “@charset ”声明 以 外 ， 
他 的 声明 多 数 可 使 用 CSS 样式 来 蔡 代 。 


17.4.4 CSS 绝对 和 相对 长 度 单位 


绝对 单位 是 指 在 设计 中 使 用 的 衡量 物体 在 实际 环境 中 的 长 度 、 面 积 、 大 小 等 的 单位 。 绝 对 单位 很 少 
在 网 页 中 使 用 ， 其 通常 用 于 实体 印刷 中 。 但 是 在 一 些 特殊 的 场合 ， 使 用 绝对 单位 是 非常 必要 的 。 

如 果 为 网 页 标签 的 各 种 长 度 使 用 绝对 单位 ， 则 网 页 浏览 器 会 根据 显示 器 的 分 辨 率 等 来 设置 标签 的 显 
示 尺 寸 。 相 对 单位 与 绝对 单位 相 比 ， 其 显示 大 小 是 不 固定 的 ， 其 所 设置 的 对 象 受 屏幕 分 辨 率 、 屏 幕 可 视 
区 域 . 浏览 器 设置 和 相关 元 素 的 大 小 等 多 种 因素 的 影响 。W3C 规定 CSS 样式 表 可 使 用 以 下 几 种 相对 单位 。 
1. em 

em 单位 表示 字体 对 象 的 行 高 , 其 能 够 根据 字体 的 大 小 属性 值 来 确定 大 小 。 例如, 当 设 置 字体 为 12px 
村，1 个 em 就 等 于 12px。 如 果 网 页 中 未 确定 字体 大 小 值 ， 则 em 的 单位 高 度 根据 浏览 器 默认 的 字体 大 小 
来 确定 。 在 正 浏览 器 中 ， 默 认 字体 高 度 为 16px。 
号 

ex 是 衡量 小 写字 母 在 网 页 中 的 大 小 的 单位 ,其 通常 根据 所 使 用 的 字体 中 小 写字 母 x 的 高 度 作 为 参考 。 
在 实际 使 用 中 ， 浏 览 器 将 通过 em 的 值 除 以 2 以 得 到 ex 值 。 
3. px 

PX 就 是 像素 ,显示 器 屏幕 中 最 小 的 基本 单位 。px 是 网 页 和 平面 设计 中 最 常见 的 单位 ,其 取 值 是 根据 
显示 器 的 分 辩 率 来 设计 的 。 
4. 百分比 

百分比 也 是 一 个 相对 单位 值 ， 其 必须 通过 另 一 个 值 来 计算 . 通常 用 于 衡量 对 象 的 长 度 或 宽度 。 在 网 
页 中 .使 用 百分比 的 对 象 通常 取 值 的 对 象 是 其 父 对 象 。 
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CSS 选择 器 





选择 器 是 CSS 代码 的 对 外 接口 。 网 页 浏览 器 就 是 根据 CSS 代码 的 选择 器 实现 和 XHTML 代码 的 匹 
配 ， 然 后 读 取 CSS 代码 的 属性 、 属 性 值 ， 将 其 应 用 在 网 页 文档 中 。CSS 的 选择 器 名 称 只 允许 包括 字母 、 
数字 以 及 下 画 线 ， 其 中 .不 允许 将 数字 放 在 选择 器 的 第 1 位 ， 也 不 允许 与 XHTML 标签 重复 ， 以 免 出 现 
混乱 。 本 节 主 要 讲述 ,在 CSS 的 语法 规则 中 主要 包括 的 5 种 选择 器 ， 即 标签 选择 器 、 类 选择 器 、ID 选择 
器 、 伪 类 选择 器 、 伪 对 象 选择 器 。 用 户 通 过 本 节 的 学 习 可 以 为 后 面 的 网 站 建设 奠定 基础 。 


17.5.1 标签 选择 器 


在 XHTML 1.0 中 , 共 包括 94 种 基本 标签 。CSS 提供 了 标签 选择 器 , 允许 用 户 直接 定义 多 数 XHTML 
标签 的 样式 。 
例如 ， 定 义 网 页 中 所 有 无 序列 表 的 符号 为 空 ， 可 直接 使 用 项 目 列表 的 标签 选择 器 ol: 
































olf 
list-style:none; 


} 
17.5.2 ”类 选择 器 


在 使 用 CSS 定义 网 页 样式 时 ,经 常 需要 对 某 一 些 不 同 的 标签 进行 定义 ,使 之 呈现 相同 的 样式 。 在 实 
现 这 种 功能 时 ， 就 需要 使 用 类 选择 器 。 类 选择 器 可 以 把 不 同类 型 的 网 页 标签 归 为 一 类 ， 为 其 定义 相同 的 
样式 ,简化 CSS 代码 。 

在 使 用 类 选择 器 时 , 需要 在 类 选择 器 的 名 称 前 加 类 符号 “…。 而 在 调用 类 的 样式 时 , 则 需要 为 XHTML 
标签 添加 class 属性 并 将 类 选择 器 的 名 称 作为 class 属性 的 值 。 例 如 .网 页 文档 中 有 三 个 不 同 的 标签 , 一 
个 是 层 (div) ， 一 个 是 段落 (p) ,还 有 一 个 是 无 序列 表 (ul) 。 

如 果 使 用 标签 选择 器 为 这 三 个 标签 定义 样式 .使 其 中 的 文本 变 为 红色 ， 需 要 编写 三 条 CSS 代码 : 

div{/* 定 义 网 页 文档 中 所 有 层 的 样式 */ 

color: #ff00007 











p{/* 定 义 网 页 文档 中 所 有 段落 的 样式 */ 
color: #ff00007 


ul{/* 定 义 网 页 文档 中 所 有 无 序列 表 的 样式 */ 
color: #ff0000; 


使 用 类 选择 器 ， 则 可 将 以 上 三 条 CSS 代码 合并 为 一 条 : 
.redText{ 
color: #ff0000; 
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然后 ， 即 可 为 div、p 和 也 等 标签 添加 class 属性 ， 应 用 类 选择 器 的 样式 : 


<div class="redText"> 红 色 文 本 </div> 

<p class="redText"> 红 色 文 本 </div> 

<ul class="redText"> 
<1i> 红 色 文 本 </1i> 


</ul> 





一 个 类 选择 器 可 以 对 应 于 文档 中 的 多 种 标签 或 多 个 标签 . 体现 了 CSS 代码 的 可 重用 性 . 其 与 标签 选 
择 器 都 有 其 各 自 的 用 途 。 


17.5.3 ID 选择 器 


了 D 选择 器 也 是 一 种 CSS 的 选择 器 。 之 前 介绍 的 标签 选择 器 和 类 选择 器 都 是 一 种 范围 性 的 选择 器 , 可 
设 定 多 个 标签 的 CSS 样式。 而 人 D 选择 器 则 是 只 针对 某 一 个 标签 的 、 唯 一 性 的 选择 器 。 

在 XHTML 文档 中 ， 人 允许 用 户 为 任意 一 个 标签 设 定 人 D， 并 通过 该 有 D 定义 CSS 样式 . 但 是 . 不 允许 
两 个 标签 使 用 相同 的 人 D。 使 用 人 D 选择 器 .用 户 可 以 更 加 精密 地 控制 网 页 文档 的 样式 。 在 创建 ID 选择 器 
时 ， 需 要 为 选择 器 名 称 使 用 ID 符号 “#"。 在 为 XHTML 标签 调用 ID 选择 器 时 ， 需 要 使 用 其 ID 属性 。 例 
如 ， 通过 ID 选择 器 ， 分 别 定义 某 个 无 序列 表 中 三 个 列表 项 的 样式 : 








#1istLeft{ 
float:left; 

} 

#1istMiddle{ 
float: inherit; 

#1listRight{ 
float:right; 

} 


然后 ， 即 可 使 用 标签 的 ID 属性 ,应 用 三 个 列表 项 的 样式 : 
<ul> 

<1i id="1istLeft"> 左 侧 列表 </1i> 

<1i id="listMiddle"> 中 部 列表 </1i> 

<1i id="1istRight"> 右 侧 列表 </1i> 
</ul> 


17.5.4 伪 类 选择 器 


之 前 介绍 的 三 种 选择 器 都 是 直接 应 用 于 网 页 标签 的 选择 器 。 除 了 这 些 选择 器 外 ，CSS 还 有 另 一 类 选 
择 器 ， 即 伪 选 择 器 。 与 普通 的 选择 器 不 同 ， 伪 选择 器 通常 不 能 应 用 于 某 个 可 见 的 标签 ， 只 能 应 用 于 一 些 
特殊 标签 的 状态 。 其 中 ， 最 常见 的 伪 选 择 器 就 是 伪 类 选择 器 。 

在 定义 伪 类 选择 器 之 前 ， 必 须 首先 声明 定义 的 是 哪 一 类 网 页 元 素 ， 将 这 类 网 页 元 素 的 选择 器 写 在 伪 
类 选择 器 之 前 ， 中 间 用 冒号 “:” 隔 开 : 
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selector:pseudo-class {property: value} 


/* 选 择 器 : 伪 类 {属性 : 属性 值 ，}*/ 





CSS 2.1 标准 中 . 共 包 括 7 种 伪 类 选择 器 。 在 正 浏览 器 中 .可 使 用 其 中 的 4 种 。 
例如 ， 要 去 除 网 页 中 所 有 超 链接 在 默认 状态 下 的 下 画 线 ， 就 需要 使 用 到 伪 类 选择 器 : 











a:link { 

/* 定 义 超 链 接 文 本 的 样式 */ 
text-decoration: none; 
/* 去 除 文本 下 画 线 */ 

} 


17.5.5 ” 伪 对 象 选择 器 


伪 对 象 选择 器 也 是 一 种 伪 选 择 器 ， 其 主要 作用 是 为 某 些 特定 的 选择 器 添加 效果 。 在 CSS 2.1 标准 中 
共 包 括 4 种 伪 对 象 选 择 器 , 在 正 5.0 及 之 后 的 版 本 中 支持 其 中 的 两 种 。 

伪 对 象 选择 器 的 使 用 方式 与 伪 类 选择 器 类 似 ， 都 需要 先 声 明定 义 的 是 哪 一 类 网 页 元 素 ， 将 这 类 网 页 
元 素 的 选择 器 写 在 伪 类 选择 器 之 前 . 中 间 用 冒号 “: 隔 开 .。 例如 . 定义 某 一 个 段落 文本 中 第 1 个 字 为 2em 
即 可 使 用 伪 对 象 选择 器 : 


























pt{ 
font-size: 12px; 
} 
p:first-lettert{ 
font-size: 2em; 


; 


LA 有 i 和 CSS 选择 方法 


选择 方法 即使 用 选择 器 的 方法 。 一 段 CSS 代码 可 能 不 只 定义 一 个 选择 器 ,因此 需要 通过 选择 方法 来 
指定 选择 器 的 使 用 方式 。CSS 通常 所 使 用 的 选择 方法 有 如 下 几 类 : 普通 和 通 配 选择 、 分 组 选择 、 包 含 选 
择 方 法 。 用 户 通过 本 节 的 学 习 可 以 为 后 面 的 网 站 建设 商定 基础 。 


17.6.1 普通 和 通 配 选 择 
该 选择 方式 是 最 普通 的 使 用 选择 器 的 方法 .该 方法 只 可 以 使 用 一 个 选择 器 以 及 一 个 选择 器 加 一 个 伪 
类 或 伪 对 象 选择 器 。 例 如 ， 设置 网 页 的 页 面 边 距 为 0， 其 代码 如 下 所 示 : 


body { 
margin:0 


有 


在 CSS 语法 中 . 可 以 像 在 Windows 中 一 样 使 用 通配符 “* “。 例 如 需要 设置 网 页 中 所 有 元 素 的 边框 
度 为 0， 其 代码 如 下 所 示 : 





册 
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/* 定 义 所 有 网 页 元 素 的 样式 */ 
border-top-width: Opx; 
border-right-width: Opx; 
border-bottom-width: Opx; 
border-left-width: Opx; 
/* 定 义 四 边 的 边框 为 0px*/ 

} 


17.6.2 ”分 组 选择 

该 选择 方式 是 一 种 提高 CSS 代码 书写 与 执行 效率 的 方法 。 在 普通 CSS 代码 中 . 通常 是 一 个 选择 器 对 
应 一 个 声明 。 事 实 上 ， 自 CSS 2.0 开始 .就 已 支持 分 组 选择 的 方式 ， 也 就 是 用 一 个 规则 定义 多 个 选择 器 。 
在 定义 多 个 选择 器 时 ， 应 将 选择 器 以 “,” 隔 开 ， 以 防止 语法 混乱 。 例 如 ,定义 了 D 为 divl 和 div2 的 两 个 
层 , 层 内 的 文本 字体 大 小 为 12px， 其 代码 如 下 所 示 : 




















#divl,#div2 { 
/* 分 组 定义 divl 和 div2 两 个 ID*/ 
font-size: 12px; 

/* 定 义 字体 的 大 小 为 12px*/ 

} 


17.6.3 包含 选择 方法 


如 果 需 要 定义 某 个 网 页 元 素 中 谋 套 的 多 个 网 页 元 素 的 样式 .可 以 使 用 包含 选择 的 方法 。 例 如 ， 定 义 
divl 类 中 的 所 有 段落 的 边 距 为 Opx， 其 代码 如 下 所 示 : 

.divl Pi{ 

/* 定 义 类 div1l 中 的 所 有 段落 ， 父 元 素 和 子 元 素 之 间 以 空格 区 分 */ 

Imargin:0PX7 

/* 定 义 段落 边 距 */ 

} 

在 使 用 包含 选择 方法 时 .必须 保证 父 元 素 与 子 元 素 的 包含 关系 。 若 父 元 素 没有 包含 子 元 素 ， 则 包含 
选择 方法 是 无 效 的 。 包 含 选择 方法 还 可 以 实现 多 层 包含 . 例如 . 定义 divl 类 中 段落 内 的 文本 , 设置 其 字 
体 大 小 为 14px， 其 代码 如 下 所 示 : 





.divl p span { 

/* 定 义 类 divl 中 的 段落 内 文本 */ 
font-size:14px; 

/* 定 义 文本 大 小 为 1 4px*/ 

| 


如 果 要 实现 上 面 CSS 样式 代码 的 控制 ， 则 网 页 元 素 的 谋 套 关系 应 如 下 所 示 : 


<div class="divl"> 


<!-- 第 1 层 ， 由 类 div1l 控制 的 层 --> 
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<p> 
<! 一 第 2 层 ， 包 含 于 层 中 的 段落 一 > 
<span>TEXT</span> 
<!-- 第 3 层 ， 包 含 于 段落 中 的 文本 -> 
</p> 
</div> 
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CSS 滤 镜 是 一 种 基于 DHTML 的 特殊 应 用 ， 其 可 以 为 各 种 文本 、 图 像 添 加 类 似 Photoshop 等 图 像 处 
理 软件 才能 实现 的 效果 ,包括 透明 度 、 模 糊 、 滤 色 、 发 光 等 。 在 使 用 CSS 滤 镜 时 ， 需 要 先 为 CSS 选择 器 
添加 filter 属性 ,然后 再 将 滤 镜 的 方法 与 参数 定义 为 filter 属性 的 值 。 本 节 主 要 讲述 透明 度 滤 镜 、 模 糊 滤 镜 
和 滤 色 滤 镜 、 发 光 滤 镜 和 灰 度 滤 镜 、 颜 色 反 转 滤 镜 和 X 光 滤 镜 、 遮 罩 滤 镜 和 阴影 滤 镜 。 用 户 通过 本 节 的 
学 习 可 以 为 后 面 的 网 站 建设 奠定 基础 。 


17.7.1 透明 度 滤 镜 


使 用 CSS 滤 镜 ,用户 可 以 方便 地 定义 各 种 网 页 标签 的 透明 度 ， 从 而 制作 半 透明 的 效果 。 在 设置 网 页 
标签 的 透明 度 时 ， 需 使 用 CSS 滤 镜 的 alpha 方法 ， 代 码 如 下 所 示 : 




















filter : alpha( opacity = opacity ，finishopacity = finishopacity, style= style, 
startx = startx , starty = starty , finishx = finishx , finishy = finishy ); 


在 上 面 的 代码 中 ，alpha0 方 法 主要 包括 7 个 等 式 参数 。style 参数 的 4 种 值 分 别 定义 了 渐变 透明 的 4 
种 方式 . 包括 整体 透明 、 线性 渐变 、 圆 形 放射 渐变 以 及 矩形 放射 渐变 。 该 参数 的 默认 值 为 0. 即 整体 渐变 。 
当 设 置 参数 为 1 时 ,表示 线性 渐变 ， 而 当 参 数 被 设置 为 2 时 ， 则 表示 圆 形 放射 渐变 ， 当 参数 被 设置 为 3 
时 , 表示 矩形 放射 渐变 。 在 定义 了 网 页 标签 为 渐变 方式 而 非 整 体 透明 时 , 就 需要 通过 startx、starty、 finishx 
和 finishy 4 种 属性 ,定义 渐 变 的 起 始点 和 结束 点 。 例 如 .定义 某 个 网 页 标签 整体 透明 ， 代 码 如 下 所 示 : 








filter : alpha ( opacity = 50 ); 





而 当 定 义 网 页 标签 为 渐变 透明 时 ， 则 需要 同时 设置 7 种 属性 .代码 如 下 所 示 : 


filter : alpha ( opacity = 30 ，finishopacity =80 , style = 2 , startx = 10 ， 
starty = 10 ，finishx = 120 , finishy = 150 ) ; 


17.7.2 ”模糊 滤 镜 和 滤 色 滤 镜 


使 用 CSS 样式 还 可 以 定义 网 页 标签 中 内 容 的 模糊 滤 镜 .其 需要 为 filter 属性 使 用 blur0 方 法 ,同时 定 
义 blur0 方 法 的 三 种 参数 .代码 如 下 所 示 : 


filter : blur ( add = add, direction = direction, strength = strength ) ; 


其 中 ，add 参数 包含 tue 和 false 两 个 值 ， 定 义 网 页 标签 是 否 应 用 模糊 滤 镜 的 效果 :direction 参数 定 


332 





:2 第 17 音 ， CSS 样式 





义 网 页 标签 中 内 容 模糊 的 方向 .单位 为 角度 值 . 其 中 0 为 垂直 向 上 .90 为 水 平 右 侧 .180 为 垂直 向 下 . 
270 为 水 平 左 侧 : strength 参数 定义 模糊 的 强度 ， 单 位 为 像素 ， 默认 值 为 5。 
例如 ， 定义 某 个 网 页 标签 的 内 容 以 垂直 向 下 的 方向 模糊 3 像素 ， 代 码 如 下 所 示 : 





filter : blue ( add = true , direction = 180 ， strength = 3 ) 7 


滤 色 滤 镜 的 作用 就 是 将 网 页 标签 内 容 中 的 某 个 颜色 过 滤 掉 ， 使 其 变 为 透明 。 在 应 用 滤 色 滤 镜 时 ， 需 
要 使 用 filter 属性 的 chroma0 方 法 ， 代码 如 下 所 示 : 

















filter : chroma ( color = color ) ; 


滤 色 滤 镜 的 chroma0 方 法 中 只 有 一 个 参数 值 . 即 需要 过 滤 的 颜色 .其 值 为 16 进 制 RGB 颜色 或 ARGB 
颜色 。 例 如 ,定义 过 滤 掉 网 页 标签 中 的 红色 (#Ht0000) ， 代 码 如 下 所 示 : 


filter : chroma ( color = #ff0000 ) ; 
17.7.3 ”发 光 滤 镜 和 灰 度 滤 镜 


发 光 也 是 常用 的 一 种 CSS 滤 镜 ,其 可 以 在 不 影响 网 页 标签 本 身 的 情况 下 ,在 网 页 标签 的 周围 创建 带 
有 一 定 颜 色 的 渐变 光 晕 。 为 网 页 标签 应 用 发 光 渡 镜 . 需要 使 用 filter 属性 的 glow0 方 法 ,代码 如 下 所 示 : 














filter : glow ( color = color , strength = strength ) ; 














glow 方法 有 两 个 参数 . 其 中 , color 参数 定义 网 页 标签 所 散发 出 光 旱 的 颜色 , 默认 值 为 红色 (#Ht0000) ， 
而 strength 参数 则 定义 网 页 标签 所 散发 出 光量 的 强度 ， 单 位 为 像素 ,默认 值 为 5。 例 如， 定义 一 个 网 页 标 
签 散发 黄色 (#00fff) 的 4px 光 旱 ,代码 如 下 所 示 : 


filter : glow ( color = #00ffff strength = 4 ) 


灰 度 滤 镜 的 作用 是 消除 网 页 中 所 有 色彩 的 色 度 ， 只 显示 其 灰 度 。 为 网 页 标签 应 用 灰 度 滤 镜 时 ， 需 要 
使 用 gray0 方 法 ， 代 码 如 下 所 示 : 
filter : gray() ; 


gray0 方 法 没有 任何 参数 . 使 用 也 十 分 简单 。 网 站 在 某 些 特定 时 间 需 要 将 整 站 定义 为 灰色 时 . 就 可 以 
在 所 有 页 面 的 CSS 规则 中 使 用 统 配 选择 方法 ， 应 用 灰 度 滤 镜 ,代码 如 下 所 示 : 





weer ss qravty py 


17.7.4 ”颜色 反 转 滤 镜 和 X 光 滤 镜 


颜色 反 转 滤 镜 可 以 倒置 网 页 标签 内 容 的 颜色 值 和 亮度 值 ， 将 所 有 颜色 转换 为 与 其 相反 的 颜色 ,例如 
黄色 转换 为 紫色 、 蓝 色 转 换 为 橙色 、 黑 色 转 换 为 白色 等 。 在 反 转 颜色 时 .应 使 用 invert0 方 法 作为 filter 属 
性 的 值 ， 代 码 如 下 所 示 : 








Ler overt oN 


invert( 方 法 的 泻 染 方式 与 gray0 方 法 类 似 . 都 会 消耗 较 多 浏览 器 的 资源 ， 因 此 在 使 用 时 应 慎重 。 
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X 光 滤 镜 也 是 一 种 用 于 图 像 处 理 的 滤 镜 .其 可 以 将 网 页 中 的 图 像 转 换 为 类 似 胶 片 的 效果 ， 清 除 图 像 
中 的 色 度 ， 然 后 再 将 图 像 中 色彩 的 亮度 翻转 。 为 图 像 应 用 义 光 滤 镜 .代码 如 下 所 示 : 
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17.7.5 遮 罩 滤 镜 


遮 罩 滤 镜 的 作用 类 似 Flash 中 的 遮 章 层 。 当 两 个 网 页 标签 出 现 层 琶 时 ， 可 以 为 其 应 用 遮 罩 滤 镜 ， 将 
位 于 上 方 的 网 页 标签 制作 为 遮 章 层 ， 遮 章 下 方 的 网 页 标签 ， 只 显示 下 方 网 页 标签 中 被 上 方 网 页 标签 遮 章 
住 的 内 容 。 

为 网 页 标签 应 用 遮 章 滤 镜 ， 需 要 将 mask0 方 法 定义 为 filter 属性 的 属性 值 。mast0 方 法 的 参数 只 有 一 
个 ， 即 定义 非 遮 罩 部 分 的 颜色 ,其 值 为 16 进 制 颜色 值 ， 代 码 如 下 所 示 : 

















filter : mask ( color = color ) ? 


例如 ， 两 个 网 页 层 相互 重 倒 .位 于 下 方 的 层 中 包含 一 个 图 片 ， 而 位 于 上 方 的 层 中 则 是 无 背景 色 的 文 
本 。 为 文本 应 用 遮 单 层 后 ， 即 可 将 图 片 填充 到 文本 中 ， 代码 如 下 所 示 : 




















filter : mask ( color = #00ff00 ) ; 





在 上 面 的 代码 被 应 用 到 文本 的 层 中 以 后 ,文本 的 内 部 将 显示 图 片 被 庶 章 的 部 分 ， 而 外 部 则 将 被 填充 
为 绿色 。 


17.7.6 ”阴影 滤 镜 


阴影 滤 镜 是 一 种 比较 常用 的 滤 镜 ， 其 可 以 根据 用 户 定义 的 角度 ， 向 某 个 方向 泻 染 渐变 的 光 旱 。 事 实 
上 ， 阴 影 滤 镜 就 是 带 有 方向 性 的 发 光 滤 镜 。 为 网 页 标签 应 用 阴影 滤 镜 ， 需 要 为 filter 属性 添加 shadow() 方 
法 的 属性 值 ， 代 码 如 下 所 示 : 





filter : shadow ( color = color , direction = direction ) }; 





shadow0 方 法 包含 两 个 参数 , 即 color 参数 和 direction 参数 。color 参数 用 于 定义 投影 的 颜色 ,其 值 为 
16 位 RGB 颜色 值 或 16 位 ARGB 颜色 值 。direction 参数 的 作用 是 定义 投影 的 角度 ， 其 值 为 角度 值 ， 其 方 
向 的 定义 方式 与 模糊 滤 镜 的 定义 方式 相同 。 例 如 ， 定 义 一 个 网 页 对 象 的 阴影 为 灰色 (#666666) ， 朝 向 右 
下 角 ， 代码 如 下 所 示 : 














filter shadow ( color = #666666 , direction = 135 ) ; 


1.8 下 


本 章 概要 性 地 介绍 了 CSS 样式 . 主要 内 容 有 博客 的 栏目 . 博客 与 传统 网 站 的 区 别 、 博客 的 布局 方式 、 
CSS 基本 语法 、CSS 选择 器 、CSS 选择 方法 和 CSS 滤 镜 .为 本 书后 续 的 学 习 打下 坚实 的 基础 。 主 要 讲述 
如 何在 网 站 建设 中 应 用 CSS 样式 ,制作 吸引 人 的 网 站 的 一 些 方 法 和 相关 技术 . 接 下 来 我 们 通过 两 个 实例 
来 对 本 章 的 内 容 进行 实践 。 
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17.8.1 实战 : 制作 蓝 色 枫叶 博客 首页 


博客 事实 上 是 个 人 网 站 的 一 种 ， 只 是 借助 了 博客 的 版 块 和 形式 .也 是 由 Banner、 博 客 主题 部 分 和 导 
航 条 组 成 的 。 在 本 实例 中 ， 将 制作 个 人 博客 首页 ， 主 要 练习 添加 CSS 样式 、 添 加 行为 、 设 置 连接 、 设 置 
表格 属性 、 修 改 Div 属性 ， 如 图 17-9 所 示 。 





蓝 色 枫叶 的 个 人 博客 


图 17-9 制作 蓝 色 枫叶 博客 首页 


STEP|01 打开 Dreamweaver. 新 建 空白 网 页 “index.html* 和 网 页 的 CSS 文件 “main.css”, 并 在 “main.css” 
文件 中 定义 网 页 的 body 和 html 两 个 标签 ， 如 图 17-10 和 图 17-11 所 示 。 

STEP|02 新 建 一 个 宽度 为 1003 像素 的 表格 。 在 CSS 文件 中 为 其 新 建 类 属性 并 应 用 在 表格 中 ， 制 作 网 页 
的 背景 ， 如 图 17-12 所 示 。 


-tabtebg { 
position: absoturei 


Dw 文 4(D 编 (E) 记 





局 ee url(tmages/bg. jpg); 
EB | | EE 出 同 htal {margin:epx;overflow-y:hidden; } } WN CN 
图 17-10 新 建 空白 网 页 和 CSS 文件 图 17-11 CSS 样式 代码 图 17-12 CSS 样式 代码 


STEP|03 新 建 一 个 3 行 x2 列 的 表格 作为 网 页 的 布局 表格 。 将 第 1 行 和 第 3 行 的 两 列表 格 合并 。 在 布局 
表格 第 1 行为 博客 插入 透明 Banner， 如 图 17-13 所 示 。 
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图 表格 三 65 | 交 Wa |@ 表 zj] Caifao | CBA Gs 无 四 @ 
一 = cas2 :alspace 0 Border 0 世 
Hm Em om 
5 [| 





图 17-13 【属性 】 面 板 


STEP|04 单 击 布局 表格 第 2 行 第 1 列 的 单元 格 . 在 其 中 插入 一 个 新 的 表格 . 制作 博客 的 辅助 栏 。 将 表格 
拆 分 ， 制 作 博 客 用 户 的 个 人 资料 部 分 ,并 添加 图 片 ， 如 图 17-14 所 示 。 

















图 17-14 添加 图 片 
STEP|05 在 博客 用 户 个 人 资料 下 方 插入 单元 行 ， 在 代码 视窗 以 列表 的 方式 输入 文章 收藏 。 使 用 CSS 对 
文章 列表 的 字体 颜色 、 段 落 距离 等 类 属性 进行 修饰 如 图 17-15 和 图 17-16 所 示 。 





eft 


< Clacs-"noticetextn><a href="s pdaterexty ,终于 过 年 了 ， 有机. 

<U class="noticetext"> 4 htetext'> 下 次 更 新 不 是 要 到 过 .， 

<Li cta ticetextn pdatetext"> 过 完 五 一 盼 十 一 ..。 i 、 
yi b 关 。 下 次 更 新 不 是 要 到 过 
<U cla ticetext" ef="# pdatetext"> 工 作 很 忙 ,几乎 没 时 间 。 过 完 五 一 盼 十 一 





a ticetext"> + pdatetext' 开 博 两 年 来 的 感觉 . .- “一 王 作 人 忙 一 开 于 没 时 间 一 一 
人 atetext' 者 肖 挤 汪 的 机 叶 亿 时 仿 。。”” 开 博 两 年 来 的 感觉 
</Ui> 。. .纤纤 掉 落 的 机 叶 





图 17-15 添加 内 容 图 17-16 设置 样式 





STEP|06 在 文章 收藏 列表 下 方 插入 单元 格 . 切换 至 代码 视窗 . 制作 友情 链接 列表 。 单 击 博客 布局 表格 的 





六 蓝 色 机 叶 的 博客 
六 ”高举 上 帝 的 伟大 旗帜 
六 爱 生 活 , 爱 竹 泣 
于 瓦尔 特 的 老 帘 

六 克 房 伯 的 军火 工厂 
| 








图 17-17 添加 表格 








:第 17 章 CSS 样式 





STEP|07 将 主题 表格 按照 博客 的 版 块 拆 分 为 6 行 . 制作 三 个 标题 行 和 三 个 内 容 行 。 在 博客 的 主题 内 容 单 
元 行 插入 表格 .制作 博客 首页 的 内 容 预览 .如 图 17-18 所 示 。 

















图 17-18 页 面 效 果 


STEP|08 单 击 博客 布局 表格 的 第 3 行 ， 输 入 博客 的 版 权 信息 。 切 换 至 代码 视窗 ， 按 Ctl+F 组 合 键 搜索 
</body> 标 签 ， 在 </body> 标 签 之 前 插入 新 表格 ， 并 为 表格 设置 CSS 属性 ， 制 作 浮动 导航 条 ， 如 图 17-19 
和 图 17-20 所 示 。 

td height="60" colspan="2"><p class="copyright">Copyright © 2666 - 


2008 myblogsystem Inc. All Rights Reserved<br /> 
版 权 所 有 仿冒 必 纠 </p> 


图 17-19 CSS 样式 代码 


Copyrieht © 2006 - 2008 myblogsystem Inc. Ml Rights Reserved 
版 权 所 有 仿冒 必 纠 


图 17-20 页 面 效 果 


STEP|09 使 用 图 像 处 理 软件 制作 导航 条 的 按钮 ,切换 至 设计 视图 , 将 导航 条 所 在 的 表格 拆 分 ,将 导航 条 
的 按钮 依次 插入 到 导航 条 表格 中 ， 如 图 17-21 所 示 。 


PR 
加 
刘 


STEP|10 在 【属性 】 面 板 中 分 别 为 每 个 导航 按钮 图 像 设 置 边框 为 “0” ， 为 按钮 插入 超 链接 。 用 图 像 处 理 
软件 制作 按钮 的 交换 图 像 . 打开 【行为 】 面板 分 别 为 按钮 添加 交换 图 像 的 行为 。 切换 至 代码 视图 . 将 <title> 
标签 的 属性 修改 为 “ 蓝 色 枫叶 的 个 人 博客 ". 即 可 保存 页 面 为 “index.html” .完成 制作 ,如 图 17-22 所 示 。 





图 17-21 页 面 效果 











图 17-22 页 面 效 果 


17.8.2 ”实战 : 制作 博客 内 容 页 


在 个 人 博客 首页 制作 完成 后 ， 本 例 将 制作 个 人 博客 中 的 内 容 页 面 ， 包 括 日 志 页 面 、 相 册页 面 和 音乐 
页 面 。 在 制作 过 程 中 ， 只 需要 对 博客 首页 中 的 内 容 显示 部 分 进行 修改 即 可 ， 左 侧 栏 、 页 头 和 页 尾 不 需要 
修改 ， 主 要 练习 添加 图 片 、 设 置 页 面 属性 、 添 加 Div 层 、 设 置 层 属性 ， 如 图 17-23 所 示 。 








图 17-23 页 面 效果 


STEP|01 将 博客 首页 另存 为 “bloghtml ， 用 Dreamweaver 打开 ， 将 博客 的 主题 部 分 表格 删除 。 在 删除 
主题 部 分 内 容 后 的 单元 格 中 添加 博客 日 志 版 块 的 内 容 ， 如 图 17-24 所 示 。 








图 17-24 页 面 效 果 
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STEP|02 对 日 志 版 块 的 文本 样式 进行 修饰 后 ， 即 可 保存 日 志 页 ， 完 成 制作 。 将 首页 “indexhtml” 另 存 
为 “albumhtml” 文 件 ， 用 Dreamweaver 将 其 打开 ， 将 博客 的 主题 部 分 删除 ， 如 图 17-25 所 示 。 








图 17-25 页 面 效果 


STEP|03 将 标题 栏 的 “最 新 日 志 ” 文 本 修改 为 “我 的 相册 ”。 在 删除 主题 部 分 内 容 后 的 单元 格 中 添加 博 
客 相 册 版 块 的 内 容 ， 如 图 17-26 所 示 。 


性 直入 时 没 
削 上 传 贿 片 





图 17-26 页 面 效果 


STEP|04 对 相册 版 块 的 文本 样式 进行 修饰 ， 即 可 保存 相册 页 ， 完 成 制作 。 将 首页 “index.html” 另 存 为 
“music.html” 文 件 ， 用 Dreamweaver 将 其 打开 .将 博客 的 主题 部 分 删除 ， 如 图 17-27 所 示 。 


ee 



























国友 节 去 了 神农 架 ,随便 拍 了 点 耻 片 。 | 
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网 页 设计 与 网 站 建设 自学 经 典 





STEP|05 将 博客 主题 部 分 的 标题 栏 “ 最 新 日 志 ” 修 改 为 “音乐 收藏 。 在 删除 主题 后 的 空 单元 行 中 添加 


博客 的 音乐 收藏 部 分 内 容 。 对 音乐 收藏 版 块 的 文本 进行 修饰 并 保存 页 面 . 完成 博客 网 页 的 制作 . 如 
所 示 。 








博 主 得 时 没 
有 上 夫妇 片 














图 17-28 页 面 效果 
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图 17-28 


格 


爱 蕊 织 编 。 且 和 六 化 太 几 公司 


四 EC | 人 机 


随 着 人 们 物质 生活 水 平 的 不 断 提高 ， 身 体 健康 引起 了 更 大 的 重视 ,并 且 健 康 意识 也 在 不 断 提高 。 因 
此 , 在 Intemet 中 的 健康 平台 犹如 雨后春笋 般 地 出 现 ， 对 宣传 和 推动 健康 生活 起 到 了 很 大 的 积极 作用 。 在 
设计 健康 类 的 网 站 时 .由 于 其 内 容 相对 比较 灵活 ， 所 以 没有 固定 的 版 式 ， 而 在 色彩 搭配 上 则 应 该 采用 健 
康 向 上 的 颜色 。 

本 章 将 详细 介绍 网 站 中 的 表格 ,主要 内 容 有 健康 类 网 站 类 型 、 健 康 类 网 站 常见 形式 、 插 入 表格 、 设 
置 表格 、 编 辑 表格 和 综合 实战 。 通 过 本 章 的 学 习 我 们 可 以 知道 怎样 在 网 站 中 创建 表格 。 
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网 页 设计 与 网 站 建设 自学 经 典 











健康 类 网 站 类 型 





健康 类 网 站 的 出 现 ， 可 以 使 用 户 更 加 方便 、 全 面 地 了 解 与 掌握 健康 知识 .为 提高 人 们 的 健康 意识 和 
生活 质量 起 到 了 推动 的 作用 。 根 据 内 容 的 侧重 点 ， 健 康 类 网 站 可 以 分 为 以 下 几 种 类 型 。 本 节 主 要 讲述 以 
健康 知识 为 主 的 网 站 、 以 求 医 问 药 为 主 的 网 站 、 以 单一 专业 知识 为 主 的 网 站 、 以 健康 产品 为 主 的 网 站 、 
以 健康 服务 为 主 的 网 站 和 以 综合 专业 知识 为 主 的 网 站 。 用 户 通过 本 节 的 学 习 可 以 创建 网 站 表格 ， 为 后 面 
的 网 站 建设 奠定 基础 。 

18.1.1 以 健康 知识 为 主 的 网 站 
以 健康 知识 为 主 的 网 站 通常 为 综合 型 的 健康 门户 网 站 .其 所 涉及 的 健康 信息 较为 广泛 。 例 如 , 39 健 


康 网 ， 该 网 站 内 容 主要 分 为 大 众 健康 、 疾 病 健康 和 时 尚 健康 三 大 类 ， 并 通过 健康 知识 、 网 上 健康 社区 、 
健康 数据 库 和 医药 健康 行业 搜索 工具 ， 为 用 户 提供 健康 信息 服务 ， 如 图 18-1 所 示 。 











5 更 多 - 
复读 ， 疾 两 ”药品 医院 问答 更 多 动 症 | 白 系 风 | 皮肤 痛 | 牛 庆 奖 | 风湿 骨科 | 免疫 力 低 | 六 病 痪 医院 


39 健 不 网 | 有 2 
20 Www.39.net 国 雪 和 向 医 央 | ;rter | 抗 格 中药】 笑语 | 近视 眼 | 前列 雪白 大风 治疗 | 子宫 如 疹 







加 专题 泵 焦 北京 广州 
万 | 闻 图 诛 网 过 上 海 调查 


8 步 8 和 PP 9 hn 


2 = 证 
男科 ”妇科 产科 ”儿科 ”整形 科 ”不 孕 不 育种 桨 科 ” 檀 尿 病 科 ”心血 答 科 ”肝病 科 。 则 病 科 。 肛肠 科 ” 滋 尿 科 ” 耳 各 唤 眼科 ”口腔 科 ”骨科 ”皮肤 科 神经 科 更 多 



















侣 女性 不 孚 ”个 癌症 治疗 






今日 头条 就 医 指南 健康 速递 药品 品牌 考区 。 药品 。 药 企 
手脚 冰凉 或 是 疾病 信号 教 你 暖 腰 + 饮 食 可 缓解 口腔 站 个 
| Es 


[要 闻 ] 北京 大 医院 首 建 全 科 新 西 兰 : 双 氨 胺 奶粉 毒性 比 盐 低 由 7 县。 说 站 涌 类 检 妇科 二 金 片 
[新 闻 ]】 优 卡 几 问题 达 分 早已 国际 禁用 专家 称 春运 途中 管 易 到 病 


"pore § | 
[ 文 性 ] 艺人 戒 祥 心 梗 去 世 或 有 5 大 诱因 控制 让 心情 恰 悦 = = 


~ [育儿 ] 宝宝 感冒 不 吃喝 怎么 办 国家 质 板 发 布 儿童 玩具 消费 提示 。 | | 多 汉字 以 溉 黄花 护符 片 风 浊 专利 六 
偏 头 痛 增 加 女性 患 心脏 病 风险 [减肥 】 世 界 最 大 胸部 Vs 最 小 本 轩 图 ) 控制 饮食 六 可 法 1 天价 6 斤 


敖 但 心 且 病 先 光 自习 [本 本 [加 唾 形 ] 英 男 子 用 手 普 “ 养 ”出 新 久子 这 些 巷 果 助 内 肚 间 度 拓 毒 | 用 并 2 


图 18-1 以 健康 知识 为 主 的 网 站 





18.1.2 ”以 求 医 问 药 为 主 的 网 站 


以 求 医 问 药 为 主 的 网 站 通过 结合 医疗 健康 服务 与 信息 技术 手段 ,致力 于 人 性 化 、 科 学 化 和 信息 化 的 
互联 网 导 医 和 医疗 健康 知识 的 传播 及 咨询 服务 。 例 如 .放心 医 苑 网 .该 网 站 中 的 有 问 必 答 、 健 康 社区 、 
医生 诊室 、 求 医 问 药 、 放 心 贴吧 等 版 块 ， 为 患者 的 求 医 问 药 起 到 了 很 好 的 帮助 作用 ， 如 图 18-2 所 示 。 
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蔽 心 医 范 网 pr EE 巷 半 篇 积 水 秸 物 人 录 专 业 。 于 旗 仿 过 绽 上 吁 些 人 ?了 阴 译 短小 该 阜 么 办? 
TO 二 一 一 五 和 元 教员 胸 科 (大 疾 主 。 。 种 洁 核能 治 好 吗 ? 他 专家 在 晤 询 号 击 ] 





1 9 医 E 科 | 图 和 。 健 | 和 in 
成 ”信康 网 靖 。| 于 





阳 要 早 江 。 斌 管 婴儿 村 骨头 坏死 “ 牛 庆 状 治 疗 
痛风 ”肝病 ”网 星 。 甲 碱 ” 奥 杰 。 扩 各 ”强迫 证 。” 类 所 浊 。 血 着 闪 。 帕 全 厅 尿毒 证 。 寺 丸 交 。 竟 航 由 张 。 稍 谨 庄 疮 ”无 靖 人流 视 网 里 脱落 三叉 神 经 痛 。 弹性 内 柱 闪 
性 生 抑 郭 肾 上 头痛 、 肛 午 。 了 0 疾 楼 尿 病情 神 商 ”你 店 证 。 现 椎 调 。 届 无 力 。 开 古 化 取 诡 出 血 。 不 他 不 育 ”月 经 不 油 ”过 繁 性 各 关 ”视神经 医 纲 “北京 名 区 


















:两 
加 台湾 女 轻 2012 年 12 月 12 日 12 时 12 分 出 生 ee 
疑难 杂 症 。 偏方 秘方 > 一 秆 学 养生 方 而 a 和 养生 方法 
药品 此 界 化 驻 检 查 _ 据 台 湾 TYB5 新 闻 台 报道 ， 人 台 沪 朝 化 谭 溯 一 名 女 婴 诞生 
时 时 间 ， 是 在 201: 年 12 月 12 日 中 午 12 点 12 分 ， 一 次 就 宪章 5 个 
0 12， 非 党 难得， 连 合理 是 才 说， 这 是 训 日 也 是 吉 时 ,对 女 > ”两 性 新 知 : 月 贺 之 夜 性 趣 更 浓 
丈 有 二 生 。 疾病 自 刚 要 运 级 很 好 ， 时 > 
A 二。 受 妥 前 最 要 清 尝 的 几 大 部 位 
enon [奇闻 物事 ] 台湾 女 加 2012 年 12 月 12 日 128112 分 出 但 性 滁 前 后 的 保健 
3 2 pe 侍 会 万 旬 ] 四 川 司机 违章 131 次 扣 363 分 交 著称 天 





[社会 万 象 ] 女 舞 路 老师 约 炮 网 支 没收 到 钱 报修 
| ， 仁 会 万 旭 ] 医院 杂工 病房 内 当众 强 时 残疾 女 事后 
已 及 二 + 不 孚 不 让 中 肠 闪 商 【社会 万 象 ] 上 海光 灾 多 人 “ 救 失 科 合 ”文子 8 
省 前列 腺 类 中 糖尿 病 由 靖 疮 [社会 万 象 ] 河南 兰 者 ?孤儿 遇难 
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图 18-2 ”以 求 医 问 药 为 主 的 网 站 


18.1.3 ”以 单一 专业 知识 为 主 的 网 站 


以 单一 专业 知识 为 主 的 网 站 通常 为 专业 型 的 医疗 健康 网 站 ， 以 提供 专业 的 健康 信息 为 主要 内 容 。 例 
如 ，365 心血 管 网 ， 该 网 站 中 为 医疗 工作 者 和 用 户 提供 了 大 量 的 心血 管 信息 和 课件 ， 并 通过 “ 导 医 问 药 ” 
“患者 之 家 ” “专家 在 线 ” 等 版 块 为 用 户 提供 了 交流 互动 的 平台 ， 如 图 18-3 所 示 。 
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图 18-3 以 单一 专业 知识 为 主 的 网 站 
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18.1.4 ”以 健康 产品 为 主 的 网 站 


该 类 型 的 网 站 以 宣传 和 推销 健康 产品 为 主要 目的 ， 但 是 通常 也 会 在 网 站 中 建立 有 关 健 康 的 版 块 ， 以 
便于 用 户 在 了 解 产品 的 同时 ， 掌 握 基 本 的 健康 知识 ， 如 东 阿 阿胶 网 ， 如 图 18-4 所 示 。 




















图 18-4 


以 健康 产品 为 主 的 网 站 


18.1.5 以 健康 服务 为 主 的 网 站 


以 健康 服务 为 主 的 网 站 通常 是 以 宣传 和 推广 健康 服务 为 主要 目的 。 例 如 ， 印 瑜珈 网 ， 该 网 站 中 会 提 
供 大 量 的 教学 资料 供用 户 学 习 ， 同 时 会 建立 用 于 交流 互动 的 论坛 ， 以 便 讨论 与 研究 相关 的 内 容 。 


18.1.6 ”以 综合 专业 知识 为 主 的 网 站 
以 综合 专业 知识 为 主 的 网 站 .通常 是 专业 性 强 、 学 术 性 强 的 大 型 医学 、 医 疗 、 健 康 综合 性 网 站 。 它 





为 广大 临床 医生 、 医 学 科研 人 员 、 医 务 管理 员 等 提供 各 类 








资料 文献 ， 以 及 各 类 专题 学 术 会 议 等 全 方位 的 

















医学 信息 服务 , 如 37 度 





内 外 最 新 的 医学 动态 信息 、 内 容 丰 富 的 医学 








医学 网 。 


上 才 届 健康 类 网 站 常见 形式 


在 网 络 中 ， 健 康 类 网 站 是 最 常见 的 网 站 类 型 之 一 ， 根 据 网 站 的 性 质 其 表现 的 形式 也 是 多 种 多 样 的 。 
本 节 主 要 讲述 健康 类 网 站 的 常见 形式 .其 中 包括 健康 资讯 网 站 、 保 健 品 网 站 、 美 体 瘦身 网 站 、 健 康 疗养 
网 站 、 健 康 护理 网 站 和 医疗 机 构 网 站 。 用 户 通过 本 节 的 学 习 可 以 了 解 健康 类 网 站 有 哪些 常见 形式 。 


18.2.1 健康 资讯 网 站 


健康 资讯 网 站 向 用 户 宣传 健康 知识 、 提 倡 健康 的 生活 方式 和 生活 态度 。 这 类 网 站 所 覆盖 的 用 户 群 体 
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较 广 ,能够 服务 各 个 方面 的 用 户 . 需要 在 网 页 中 提供 大 量 的 信息 。 这 类 网 站 的 版 面 设计 通常 比较 紧凑 . 
所 包含 的 内 容 也 较为 全 面 ， 涉 及 各 个 方面 的 健康 知识 .如 图 18-5 所 示 。 
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图 18-5 健康 资讯 网 站 


18.2.2 ”保健 品 网 站 


通常 保健 品 网 站 是 以 宣传 与 推销 保健 品 为 主要 目的 。 因此， 这 类 网 站 在 版 面 设计 中 ， 以 展示 产品 为 
重点 ， 通 常 把 产品 图 片 放 在 网 页 中 较 显要 的 位 置 ， 以 加 深 用 户 对 产品 的 印象 ， 如 图 18-6 所 示 。 
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图 18-6 保健 品 网 站 
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18.2.3 ”美体 瘦身 网 站 


美体 瘦身 网 站 主要 是 为 用 户 提供 美体 瘦身 的 信息 和 服务 ， 所 面向 的 对 象 通常 为 女性 ， 所 以 在 网 页 的 
色彩 搭配 上 ， 通常 以 柔美 的 颜色 为 主 色 调 。 在 版 面 设计 上 主张 简单 明了 . 只 要 突出 主题 即 可 ,如 图 18-7 


所 示 。 








[| 
到 会 站 3 入 

YOU 
2 ON A DIET 和 证 
ee WITH MIRAESOL 


一 Se 
cop A 区 
wo petit 












图 18-7 美体 瘦身 网 站 


18.2.4 ”健康 疗养 网 站 


健康 疗养 网 站 以 为 用 户 提供 健康 疗养 信息 和 服务 为 主要 目的 。 在 色彩 搭配 上 讲究 简单 、 纯 净 ， 在 布 
于 复杂 . 应 给 用 户 一 种 宁静 、 安 详 、 和 舒适 的 感觉 ， 与 网 站 的 主题 相 呼应 ， 如 图 18-8 所 示 。 
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图 18-8 健康 疗养 网 站 
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18.2.5 ”健康 护理 网 站 

健康 护理 网 站 可 以 为 用 户 提 供 健康 护理 知识 、 健康 护理 技术 等 内 容 . 所 面向 的 对 象 以 护理 人 员 为 主 。 
该 类 型 的 网 站 以 文字 信息 居多 .所 以 在 版 面 设计 中 要 考虑 文字 之 间 的 距离 .避免 过 于 拥挤 。 
18.2.6 ”医疗 机 构 网 站 


医疗 机 构 网 站 是 医疗 机 构 自己 建立 的 网 站 . 通常 用 来 宣传 和 介绍 医疗 机 构 的 医疗 设备 、 专 家 队伍 、 
医学 专业 等 信息 ， 同 时， 网 站 中 也 会 建立 有 关 健 康 医疗 方面 的 知识 版 块 。 


[如 攻 插入 表格 


表格 是 网 站 的 重要 组 成 之 一 ,用 于 在 HTML 页 面 上 显示 表格 式 数据 , 是 对 文本 和 图 像 进行 布局 的 强 
有 力 的 工具 。 通 过 表格 可 以 将 网 页 元 素 放置 在 指定 的 位 置 。 本 节 主 要 讲述 插入 表格 和 插入 广 套 表格 ,用 
户 通过 本 节 的 学 习 可 以 了 解 到 如 何在 网 站 中 插入 表格 。 


18.3.1 插入 表格 


在 插入 表格 之 前 ,首先 将 鼠标 光标 置 于 要 插入 表格 的 位 置 。 在 新 建 的 空白 网 页 中 ， 光 标 默认 在 文档 
的 左上 角 。 在 【插入 】〗】 面 板 中 单 击 Table 按钮 ， 在 弹出 的 Table 对 话 框 中 设置 相应 的 参数 ， 即 可 在 文档 中 
插入 一 个 表格 ,如 图 18-9 所 示 。 设 置 参数 后 的 效果 如 图 18-10 所 示 。 
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图 18-9 插入 表格 











图 18-10 插入 表格 效果 图 
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18.3.2 ”插入 骨 套 表格 


许 套 表格 是 在 另 一 个 表格 单元 格 中 插入 的 表格 ， 其 设置 属性 的 方法 与 其 他 任何 表格 相同 。 将 光标 置 
于 表格 中 的 任意 一 个 单元 格 . 单 击 【插入 】 面 板 中 的 【Table】 按 钮 ， 在 弹出 的 【表格 】 对 话 框 中 设置 相 
应 的 参数 ， 即 可 在 该 表格 中 插入 一 个 嵌 套 表格 .如 图 18-11 所 示 。 设 置 参数 后 的 效果 如 图 18-12 所 示 。 
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图 18-11 插入 说 套 表 格 











图 18-12 插入 谋 套 表格 效果 图 


项 [也 年 设置 表格 


对 于 文档 中 已 创建 的 表格 . 用户 可 以 通过 设置 【属性 】 面 板 ， 来 更 改 表格 的 结构 、 大 小 和 样式 等 ， 
使 表格 符合 使 用 要 求 。 本 节 主 要 讲述 怎样 在 网 站 中 设置 表格 的 各 个 参数 。 用 户 通过 本 节 的 学 习 可 以 知道 
如 何在 网 站 中 设置 表格 ,为 创建 网 站 奠定 基础 。 

18.4.1 行 和 列 


单 击 表格 的 任意 一 个 边框 . 可 以 选择 该 表格 。 此 时 .【 属 性 】 面 板 中 将 显示 该 表格 的 基本 属性 , 如 图 
18-13 所 示 。 
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图 18-13 设置 表格 


行 和 列 用 来 设置 表格 的 行 数 和 列 数 。 选 择 文档 中 的 表格 ， 即 可 在 【属性 】 面 板 中 重新 设置 该 表格 的 
行 数 和 列 数 ， 如 图 18-14 所 示 。 
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图 18-14 行 和 列 
18.4.2 表格 ID 


表格 ID 用 来 设置 表格 的 标识 名 称 。 选 择 表格 , 在 四 文本 框 中 直接 输入 即 可 设置 , 如 图 18-15 所 示 。 
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图 18-15 ”表格 ID 


18.4.3 ”间距 


间距 用 于 设置 表格 中 相 邻 单元 格 之 间 的 距离 ， 以 像素 为 单位 ， 如 图 18-16 所 示 。 












































图 18-16 间距 
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18.4.4 边框 
边框 用 来 设置 表格 四 周边 框 的 宽度 ， 以 像素 为 单位 ， 如 图 18-17 所 示 。 
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图 18-17 边框 


18.4.5 对齐 


对 齐 用 于 指定 表格 相对 于 同一 段落 中 的 其 他 元 素 (如 文本 或 图 像 ) 的 显示 位 置 。 在 【对 齐 】 下 拉 列 
表 中 可 以 设置 表格 为 【 左 对 齐 】【 右 对 齐 】 和 【居中 对 齐 】 如 图 18-18 所 示 。 
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另外 . 在 【属性 】 面 板 中 还 有 直接 设置 表格 的 4 个 按钮 这 些 按钮 可 以 清除 列 宽 和 行 高 ， 还 可 以 转 
换 表格 宽度 的 单位 。 
18.4.6 宽 

宽 用 来 设置 表格 的 宽度 ， 以 像素 为 单位 . 或 者 按照 所 占 浏览 器 窗口 宽度 的 百分比 进行 计算 。 在 通常 
情况 下 ， 表 格 的 宽度 以 像素 为 单位 ， 这样 可 以 防止 网 页 中 的 元 素 随 着 浏览 器 窗口 的 变化 而 发 生 错位 或 变 
形 ， 如 图 18-19 所 示 。 
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图 18-19 宽 
18.4.7 填充 
填充 用 来 设置 表格 中 单元 格 内 容 与 单元 格 边框 之 间 的 距离 ， 以 像素 为 单位 ， 如 图 18-20 所 示 。 
国 末 格 | 更 mao BE ee CT Class 无 
Bm rs om 
5 a 
sl | | | 
| | 
| | 于 
| | 
图 18-20 填充 


|, 天 前 编辑 表格 


如 果 创建 的 表格 不 符合 网 页 的 设计 要 求 . 那么 就 需要 对 该 表格 进行 编辑 。 在 编辑 整个 表格 、 行 、 列 
或 单元 格 时 ， 首 先 需要 选择 指定 的 对 象 。 可 以 一 次 选择 整个 表格 、 行 或 列 . 也 可 以 选择 一 个 或 多 个 单独 
的 单元 格 。 本 节 主 要 讲述 编辑 表格 的 8 个 内 容 . 内 容 包 括 选择 整个 表格 、 选 择 行 或 列 、 选 择 单元 格 、 调 
整 表格 的 大 小 、 添 加 表格 行 或 列 、 合 并 单元 格 、 拆 分 单元 格 、 删 除 表格 行 或 列 。 用 户 通过 本 节 的 学 习 可 
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以 知道 如 何在 网 站 中 编辑 表格 .为 创建 网 站 商定 基础 。 
18.5.1 选择 整个 表格 


将 鼠标 移动 到 表格 的 左上 角 、 上 边框 或 者 下 边框 的 任意 位 置 ， 或 者 行 和 列 的 边框 ， 当 光标 变 成 表格 
网 格 图 标 时 ( 行 和 列 的 边框 除外 ) ， 单 击 即 可 选择 整个 表格 . 如 图 18-21 所 示 。 
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图 18-21 选择 整个 表格 


将 光标 置 于 表格 的 任意 一 个 单元 格 中 ， 单 击 状态 栏 中 标签 选择 器 上 的 <table> 标 签 ， 也 可 以 选择 整个 
表格 。 
18.5.2 ”选择 行 或 列 


选择 表格 中 的 行 或 列 ， 就 是 选择 行 中 所 有 连续 单元 格 或 者 列 中 所 有 连续 单元 格 。 将 鼠标 移动 到 行 的 
最 左 端 或 者 列 的 最 上 端 ， 当 鼠标 光标 变 成 选择 箭头 时 ， 单 击 即 可 选择 单个 行 或 列 ， 如 图 18-22 所 示 。 
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图 18-22 选择 行 或 列 
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18.5.3 ”选择 单元 格 


将 鼠标 光标 置 于 表格 中 的 某 个 单元 格 ， 单 击 即 可 选择 该 单元 格 。 如 果 想 要 选择 多 个 连续 的 单元 格 ， 
将 光标 置 于 单元 格 中 ， 沿 任意 方向 拖 动 鼠标 即 可 选择 ， 如 图 18-23 所 示 。 

将 鼠标 光标 置 于 任意 单元 格 中 . 按 住 Ctrl 键 并 同时 单 击 其 他 单元 格 , 即 可 选择 多 个 不 连续 的 单元 格 , 
如 图 18-24 所 示 。 
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图 18-23 选择 多 个 连续 的 单元 格 图 18-24 选择 多 个 不 连续 的 单元 格 


18.5.4 调整 表格 的 大 小 


当选 择 整个 表格 后 ， 在 表格 的 右边 框 、 下 边框 和 右 下 角 会 出 现 三 个 控制 点 。 通 过 鼠标 拖 动 这 三 个 控 
制 点 ， 可 以 使 表格 横向 、 纵 向 或 者 整体 放大 或 者 缩小 ， 如 图 18-25 所 示 。 

除了 可 以 在 【属性 】 面 板 中 调整 行 或 列 的 大 小 外 ， 还 可 以 通过 拖 动 方式 来 调整 其 大 小 。 

将 鼠标 移动 到 单元 格 的 边框 上 ， 当 光标 变 成 左右 箭头 或 者 上 下 箭头 时 ， 单 击 并 横向 或 纵向 拖 动 鼠标 
即 可 改变 行 或 列 的 大 小 ， 如 图 18-26 所 示 。 
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图 18-25 调整 表格 的 大 小 图 18-26 调整 表格 的 大 小 


18.5.5 ”添加 表格 行 或 列 
想 要 在 某 行 的 上 面 或 者 下 面 添加 一 行 ， 首先 将 光标 置 于 该 行 的 某 个 单元 格 中 . 单 击 【 修 改 】 选 项 卡 
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所 示 。 





格式 (0)】 命令 ( 虽 ” ”半点 (S) 窗口 (W) 帮助 (H) 





中 的 【插入 行 】 按 钮 或 【插入 列 】 按钮. 即 可 在 该 行 的 上 面 插入 一 行 或 在 该 列 的 右 侧 插入 一 列 . 如 图 18-27 








页 面 尾 性 (P)… Ctrl+ 

















模板 履 性 (P)… 
管理 字体 (M)… 
快速 标签 编 辑 器 (Q).… Ctrl+T 
创建 链接 (UD Ctrl+L 


Ctrl+Shift+L 

















选择 表格 (S) 
合并 单元 格 (M) 


插入 行 (N) 
插入 列 (CO) 





图 18-27 添加 表格 行 或 列 


18.5.6 ”合并 单元 格 














拆 分 单元 格 (P)… 


Ctn+At+M 
Ctrl+Akt+Shift+T 


Ctn+M 
Ctrl+Shift+A 


合并 单元 格 可 以 将 同行 或 同 列 中 的 多 个 连续 单元 格 合并 为 一 个 单元 格 。 选 择 两 个 或 两 个 以 上 连续 的 
单元 格 ， 单 击 【 属 性 】 面 板 中 的 【合并 所 选单 元 格 】 按 钮 ， 即 可 将 所 选 的 多 个 单元 格 合并 为 一 个 单元 格 ， 








如 图 18-28 所 示 。 
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合并 所 和 单元 情 ， 合 用量 民 


图 18-28 合并 单元 格 


18.5.7” 拆 分 单元 格 


拆 分 单元 格 可 以 将 一 个 单元 格 以 行 或 列 的 形式 拆 分 为 多 个 单元 格 。 将 光标 置 于 要 拆 分 的 单元 格 中 ， 


单 击 【属性 】 面 板 中 的 【 拆 分 单元 格 为 行 或 列 】 按 钮 ， 在 弹出 的 对 话 框 中 选择 【 行 】 或 【 列 】 选 项 .并 





设置 行 数 或 列 数 ， 如 图 18-29 所 示 。 
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图 18-29 拆 分 单元 格 


18.5.8 删除 表格 行 或 列 
如 果 想 要 删除 表格 中 的 某 行 ， 而 不 影响 其 他 行 中 的 单元 格 ， 可 以 将 光标 








置 于 该 行 的 某 个 单元 格 中 ， 





然后 执行 【修改 】| 【表格 】| 【删除 行 】 命 令 。 将 光标 置 于 列 的 某 个 单元 格 
【删除 列 】 命 令 可 以 删除 光标 所 在 的 列 ， 如 图 18-30 所 示 。 
格 K(O) 命令 (Q) 站 点 (9 窗口 (W) 二 (H) 








.执行 【修改 】| 【表格 】| 
































页 面 尾 性 (P)… Ctrl+) 
模板 属性 (P).- 
管理 字体 (M).… 
快速 标 符 编 辑 器 (Q).… Ctrl+T 
创建 链接 (L) Carl+L 
移 除 链接 (R) Crrl+Shift+L 
打开 链接 页 面 (O).. 
表格 » 选择 表格 (S) 
mom ”| 合并 单元 格 (M) Ctrl+Alt+M 
SA ”| 拆 分 单元 格 (PP).- Ctrl+Alt+ Shift+T 
2 ”| 播 入 行 (N) Curl+M 
ED ”插入 列 (O Crl+Shift+A 
| ed 插入 行 或 列 (1).… 
到 3 行 (D) Ca+Shif+M 
删除 列 (E) Ctrl+Shift+- 


图 18-30 ”删除 表格 行 或 列 


18.6 


本 章 概要 性 地 介绍 了 网 站 中 的 表格 . 主要 内 容 有 健康 类 网 站 类 型 、 健 康 类 网 站 常见 形式 、 插 入 表格 、 





设置 表格 、 编 辑 表格 . 为 本 书后 续 的 学 习 打下 坚实 的 基础 。 主 要 讲述 如 何在 


网 站 建设 中 创建 表格 .制作 


吸引 人 的 网 站 的 一 些 方法 和 相关 技术 ， 接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进行 实践 。 
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网 页 设计 与 网 站 建设 自学 经 典 


18.6.1 实战: 设计 健康 网 站 首页 

本 例 中 的 华 康健 康 网 ， 是 一 个 以 宣传 健康 知识 为 主要 目的 的 网 站 。 该 网 站 中 建立 了 健康 资讯 、 饮 食 
健康 、 心 理 健康 、 健 康 保健 等 多 个 与 健康 密切 相关 的 版 块 。 在 网 站 色彩 搭配 上 ， 以 蓝 色 为 主 色调 . 给 人 
一 种 健康 、 积 极 向 上 的 感觉 : 在 结构 设计 上 . 整个 版 面 简单 明了 。 主 要 练习 添加 表格 、 设 置 表格 属性 、 
插入 图 片 、 添 加 文本 、 设 置 文本 样式 ， 如 图 18-31 所 示 。 











福 和 计 法 
健 序 人 二 





图 18-31 设计 健康 网 站 首页 


STEP|01 打开 Dreamweaver， 新 建 空白 网 页 “index.html“， 在 文档 中 单 击 【属性 】 面 板 中 的 【页 面 属性 】 
按钮 ， 在 弹出 的 对 话 框 中 设置 左边 距 和 上 边 距 均 为 “0px“。 在 文档 中 插入 一 个 1 行 x3 列 的 表格 ， 并 在 
第 1 列 单元 格 中 插入 Logo 图 像 ， 如 图 18-32 一 图 18-34 所 示 。 
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图 18-32 【属性 】 面 板 
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图 18-33 【页 面 属 性 】 对 话 框 
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STEP|02 设置 第 2 列 单元 格 的 宽 为 672， 然后 在 该 单元 格 中 插入 导航 条 图 像 。 根 据 页 面 设计 ,在 第 3 列 
单元 格 中 插入 素材 图 像 ， 如 图 18-35 和 图 18-36 所 示 。 











党 康 首页 。 健康 资讯 。 饮食 名 有 健康 保健 。 健康 咨询 
index_02 
TT mp 
dd Ed | 
index_01 index_03 
图 18-34 页 面 效果 图 18-35 素材 图 像 








华 康 健康 网 | 人 大 首页 。 健康 资本 五 可 到 加 “大 承 哥 这 


图 18-36 ”页面 效果 






健康 咨询 健康 论坛 





STEP|03 在 该 表格 的 下 面 插入 一 个 1 行 x 1 列 的 表格 ,并 在 该 表格 中 插入 素材 图 像 。 在 表格 下 面 再 插入 
一 个 1 行 x3 列 的 表格 ， 并 设置 第 1 列 单 元 格 的 宽 为 306， 如 图 18-37 一 图 18-39 所 示 。 
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图 18-37 素材 图 像 图 18-38 素材 图 像 
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图 18-39 【属性 〗】 面 板 
STEP|04 在 该 单元 格 中 插入 一 个 3 行 x 1 列 的 谋 套 表格 ,并 在 该 嵌 套 表格 的 各 个 单元 格 中 插入 素材 图 像 。 
在 表格 的 第 2 列 单元 格 中 插入 一 个 2 行 x3 列 的 赃 套 表格 ,该 嵌 套 表格 的 第 1 行 第 1 列 单元 格 中 为 内 容 版 
块 。 在 访 套 表格 中 ， 根 据 内 容 版 块 的 栏目 数 . 插入 一 个 宽度 为 100% 的 3 行 x1 列 的 表格 。 
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STEP|05 设置 第 1 行 单元 格 的 【高 】 为 186。 然 后 ， 插 入 一 个 2 行 x1 列 的 恋 套 表格 。 将 光标 置 于 第 1 

行 ， 单 击 【 常 用 】 选 项 卡 中 的 【图 像 】 按 钮 ， 选 择 要 插入 的 素材 图 像 。 

STEP|06 设置 嵌 套 表格 第 2 行 单元 格 的 【高 】 为 148。 然 后 ， 插 入 一 个 宽度 为 100% 的 3 行 x3 列表 格 。 

合并 第 1 行 所 有 单元 格 ， 并 设置 该 单元 格 的 【高 】 为 9px。 

STEP|07 分 别 合并 第 1 列 和 第 3 列 的 第 2、3 行 单元 格 . 并 设置 第 2 行 第 2 列 单元 格 的 【 宽 ] 为 365; 【高 ] 

为 126。 在 第 2 行 第 2 列 单元 格 中 ， 插 入 一 个 宽度 为 100% 的 6 行 x3 列表 格 ， 并 设置 其 【垂直 】 方 式 为 

【顶端 对 齐 】。 

STEP|08 选择 第 1 行 所 有 单元 格 .设置 其 【高 】 为 20， 并 分 别 设置 3 列 单元 格 的 【 宽 】 为 “5%“、“63% 

“和 “3296“。 在 第 1 行 第 1 列 单元 格 中 插入 素材 图 像 ， 然 后 在 后 两 列 单元 格 中 输入 标题 和 时 间 文 字 。 

STEP|09 选择 标题 文字 ， 设置 【大 小 】 为 “12px”、【 文 本 颜色 】 为 “#666666“。 将 同样 的 文本 属性 应 

用 到 时 间 文字 上 ， 并 单 击 【 斜 体 】 按 钮 。 

STEP|10 在 该 表格 的 其 他 行 单元 格 中 插入 素材 图 像 及 文字 。 根 据 上 述 的 方法 ， 在 表格 的 第 2 行 单元 格 中 

使 用 表格 和 广 套 表格 创建 “健康 常识 ”栏目 。 

STEPI11 在 表格 的 第 3 行 单元 格 中 插入 一 个 宽度 为 100% 的 2 行 x1 列表 格 。 设置 第 1 行 单元 格 的 【高 

为 32， 并 在 该 单元 格 中 插入 素材 图 像 。 

STEP|12 在 第 2 行 单元 格 中 插入 一 个 宽度 为 100% 的 3 行 x3 列表 格 ,然后 合并 第 1 行 和 第 3 行 所 有 单元 

格 。 根据 版 块 布局 . 在 相应 的 单元 格 中 插入 素材 图 像 。 然后 设置 第 2 行 第 2 列 单元 格 的 【 宽 ] 为 233.【 高 】 

为 93。 

STEPI13 在 第 2 行 第 2 列 单元 格 中 插入 一 个 3 行 x3 列 的 表格 。 然后， 在 各 个 单元 格 中 输入 文字 。 选 择 

所 有 文字 ,设置 【大 小 】 为 “12px“、[ 文 本 颜色 】 为 “#666666“。 

STEPI|14 在 嵌 套 表格 的 第 1 行 第 2 列 单元 格 中 插入 素材 图 像 ， 使 其 与 右 侧 的 栏目 产生 间距 。 在 凡 套 表格 

的 第 1 行 第 3 列 单元 格 中 插入 一 个 宽度 为 100% 的 7 行 x 1 列表 格 ， 如 图 18-31 所 示 。 

STEp| 鸽 根据 版 面 设计 . 在 该 表格 的 各 个 单元 格 中 插 

入 相应 的 栏目 图 像 。 合 并 第 2 行 所 有 单元 格 ， 并 插入 

素材 图 像 ， 使 其 与 版 尾 产生 间距 。 

STEP|16 在 表格 的 第 3 列 单元 格 中 插入 素材 图 像 ， 以 

拼合 成 完整 的 蓝天 白云 景象 。 在 文档 的 最 底部 插入 一 

个 1 行 x1 列 的 表格 ,并 设置 其 【高 】 为 97。 在 该 表 

格 中 插入 背景 图 像 ， 并 输入 版 权 信 息 。 一 

18.6.2 ”实战 : 设计 饮食 健康 子 页 Et 
本 例 中 的 饮食 健康 子 页 ， 与 主页 的 设计 风格 相 措 Ns 

配 , 都 是 以 蓝天 自 云 景象 为 背景 ， 以 向 日 黄花 为 衬托 。 we 

无 论 从 图 像 还 是 色彩 上 来 说 ， 都 会 给 浏览 者 留 下 一 种 

舒适 、 健 康 的 感觉 。 在 版 面 设计 上 ， 依 然 采 用 了 主页 

的 简单 布局 结构 ， 主 要 练习 添加 图 片 、 设 置 页 面 属性 、 


添加 表格 、 设置 表格 属性 、 添 加 文本 和 设置 文本 样式 . 
如 图 18-40 所 示 。 
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图 18-40 设计 饮食 健康 子 页 
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STEP|01 在 文档 中 , 插入 一 个 1 行 x3 列 的 表格 . 然后 在 各 个 单元 格 中 插入 Logo、 导 航 条 等 图 像 。 在 表 
格 的 下 面 插入 一 个 1 行 x1 列 的 表格 .并 在 该 表格 中 插入 素材 图 像 。 

STEP|02 在 表格 下 面 再 插入 一 个 1 行 x3 列 的 表格 . 并 设置 第 1 列 单元 格 的 宽 为 230， 然 后 插入 一 个 6 
行 x1 列 的 典 套 表格 。 在 第 1 行 单元 格 中 插入 素材 图 像 . 然后 . 将 第 2 行 的 单元 格 拆 分 为 2 行 2 列 单元 格 , 
该 单元 格 为 子 导航 条 。 

STEP|03 在 表格 的 其 他 行 单元 格 中 插入 其 他 栏目 的 素材 图 像 。 设 置 表格 第 2 列 单元 格 的 【 宽 】 为 670， 
然后 插入 一 个 宽度 为 100% 的 6 行 x1 列 谋 套 表格 。 

STEP|04 在 表格 的 前 3 行 插入 素材 图 像 . 并 在 第 3 行 单元 格 中 输入 标题 文字 。 在 第 3 行 单元 格 中 . 插入 
一 个 宽度 为 100% 的 2 行 x 1 列 说 套 表 格 。 

STEP|05 在 第 1 行 单元 格 中 插入 一 个 1 行 x3 列 的 谋 套 表格 . 并 根据 页 面 布局 拆 分 和 合并 单元 格 。 该 表 
格 为 “饮食 健康 ”栏目 。 在 第 2 行 单元 格 中 插入 一 个 2 行 x3 列 的 谋 套 表格 ,该 表格 中 为 “ 菜 着 来历 ”和 
“食品 溯源 ”两 个 栏目 。 

STEP|06 在 表格 的 最 后 两 个 单元 格 中 插入 素材 图 像 . 以 修饰 整个 页 面 。 在 中 间 部 分 的 最 右 侧 单元 格 中 插 
入 素材 图 像 ， 该 图 像 与 页 面 整 体 风 格 相 搭配 。 

STEP|07 在 文档 的 最 底部 插入 一 个 1 行 x 1 列 的 表格 ,并 在 该 表格 中 插入 背景 图 像 及 版 权 信息 。 保 存 文 
档 后 ， 按 F12 键 预 览 效 果 。 



































随 着 网 络 的 不 断 发 展 ， 服 饰 商家 或 品牌 公司 纷纷 在 网 络 中 建设 网 站 ， 以 在 这 一 传播 媒体 中 充分 地 展 
示 及 推广 自己 的 产品 。 服 饰 类 网 站 是 一 个 以 服饰 展示 、 销 售 为 主题 的 网 站 平台 ， 网 站 中 通常 包含 有 大 量 
用 来 展示 服饰 的 图 像 。 而 在 整体 设计 风格 上 .该 类 型 的 网 站 具有 时 尚 、 鲜 艳 、 前 卫 等 特点 .在 视觉 上 有 
着 一 定 的 冲击 效果 。 

本 章 将 详细 介绍 如 何在 服饰 类 网 站 中 应 用 文本 样式 ， 主 要 内 容 有 服饰 类 网 站 类 型 、 服 饰 类 网 站 设计 
风格 、 服 饰 网 站 色调 分 析 、 网 页 文本 、 文 本 样式 和 综合 实战 。 通 过 本 章 的 学 习 我 们 可 以 知道 怎样 在 网 站 
中 应 用 文本 样式 。 
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国 | 服饰 类 网 站 类 型 


服饰 类 网 站 ， 其 主要 目的 就 是 展示 和 和 销售 服装 服饰 等 商品 ,一 般 会 通过 图 像 及 文字 说 明 ， 使 用 户 了 
解 它们 的 款式 、 颜 色 、 措 配 等 相关 信息 。 本 节 主 要 讲述 服饰 类 网 站 类 型 . 就 网 站 的 功能 而 言 ， 可 以 分 为 
两 类 ， 即 服饰 销售 类 网 站 和 服饰 展示 类 网 站 。 用 户 通过 本 节 的 学 习 可 以 知道 服饰 类 网 站 有 几 种 类 型 .为 
后 面 的 网 站 建设 奠定 基础 。 


19.1.1 服饰 销售 类 网 站 


服饰 销售 类 网 站 是 以 销售 服饰 为 目的 的 网 站 。 该 类 型 的 网 站 也 会 在 网 页 中 插入 大 量 的 服饰 图 像 ， 以 
较 全 面 的 服饰 款式 和 搭配 样式 来 吸引 用 户 的 目光 。 另 外 ,还 有 以 服饰 销售 为 商业 目的 的 网 站 ， 在 该 类 型 
的 网 站 中 ,会 出 现 多 种 品牌 和 多 种 类 型 的 服饰 ， 通 常 是 以 当前 流行 的 服饰 为 主导 .如 图 19-1 所 示 为 某 服 
饰 销售 网 站 。 


19.1.2 ”服饰 展示 类 网 站 


服饰 展示 类 网 站 是 以 向 用 户 展示 服饰 为 目的 的 网 站 ,通常 会 在 网 页 中 插入 大 幅 的 图 像 来 对 服饰 进行 
展示 。 该 类 型 的 网 站 通常 是 一 些 品牌 服饰 的 官方 网 站 .以 展示 品牌 服饰 和 推广 新 款 服饰 为 主 ， 如 图 19-2 
所 示 为 某 服饰 展示 网 站 。 
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图 19-1 服饰 销售 类 网 站 图 19-2 服饰 展示 类 网 站 


国 Va 服饰 类 网 站 设计 风格 


网 站 的 设计 风格 是 抽象 的 .是 指 网 站 的 整体 形象 给 浏览 者 的 综合 感受 。 这 个 “整体 形象 ”包括 网 站 
的 CI (标志 、 色 彩 、 字 体 、 标 语 )、 版 面 布局 、 浏 览 方 式 、 交 互 性 等 诸多 因素 。 本 节 主要 讲述 服饰 类 网 站 
设计 风格 . 内 容 包 括 简单 型 服饰 网 站 、 卡 通 型 服饰 网 站 、 绚 丽 型 服饰 网 站 和 时 尚 型 服饰 网 站 。 用 户 通过 
本 节 的 学 习 可 以 简单 了 解 服饰 类 网 站 的 几 种 设计 风格 . 为 后 面 的 网 站 建设 商定 基础 。 


























网 页 设计 与 网 站 建设 自学 经 典 


19.2.1 简单 型 服饰 网 站 
简单 型 服饰 网 站 只 是 一 个 实现 服饰 销售 功能 的 网 站 ， 在 版 面 设计 上 较为 简单 ， 色彩 的 使 用 也 较为 单 
一 ,只 要 将 产品 的 信息 传达 给 用 户 即 可 .如 图 19-3 所 示 。 
19.2.2 ”卡通 型 服饰 网 站 
卡通 型 服饰 网 站 在 版 面 设计 上 采用 了 卡通 人 风格 .可 以 使 整个 网 站 更 加 可 爱 、 具 有 活力 .在 色彩 搭 
配 上 也 更 加 绚丽 多 彩 ， 如 图 19-4 所 示 。 
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图 19-3 简单 型 服饰 网 站 图 19-4 卡通 型 服饰 网 站 











19.2.3 绚丽 型 服饰 网 站 

绚丽 型 服饰 网 站 ， 在 整体 设计 上 是 以 时 尚 元 素 为 主题 ， 一 般 采 用 绚丽 的 色彩 、 张 扬 或 夸张 的 个 性 来 
表现 网 页 的 视觉 效果 ,使 它 突出 “前 沿 、 时 尚 、 流 行 ” 等 特点 ， 如 图 19-5 所 示 。 
19.2.4 ”时尚 型 服饰 网 站 

时 尚 型 服饰 网 站 ,同样 也 是 以 时 尚 元 素 为 主 的 网 站 ， 但 在 使 用 图 像 和 色彩 方面 较为 简单 ， 只 要 突出 
时 尚 主题 即 可 ， 如 图 19-6 所 示 。 












































图 19-6 ”时 尚 型 服饰 网 站 
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服饰 网 站 色调 分 析 





设计 者 在 设计 网 页 时 ， 除 了 要 考虑 网 站 本 身 的 特点 外 ,还 要 遵循 一 定 的 艺术 规律 ， 从 而 设计 出 色彩 
鲜明 、 风 格 独特 的 网 站 。 下 面 将 对 服饰 网 站 常用 的 几 种 色调 进行 分 析 。 本 节 主 要 讲述 服饰 网 站 常用 的 几 
种 色调 ， 内 容 包 括 潇洒 色调 服饰 网 站 、 华 丽 色调 服饰 网 站 、 优 雅 色调 服饰 网 站 、 清 歌 色调 服饰 网 站 、 自 
然 色调 服饰 网 站 、 动 感 色调 服饰 网 站 和 娇 美 色调 服饰 网 站 。 用 户 通过 本 节 的 学 习 可 以 简单 了 解 服饰 类 网 
站 的 几 种 设计 风格 为 后 面 的 网 站 建设 商定 基础 。 


19.3.1 潇洒 色调 服饰 网 站 
满 酒色 调 是 以 暗 的 冷色 为 主 再 加 上 少量 对 比 色 构成 具有 安定 厚重 的 感觉 , 是 富有 格调 的 男性 情调 ， 


而 且 该 色调 可 以 和 任何 一 种 色彩 相 搭 配 ， 不 会 让 人 觉得 突 元 ， 所 以 以 男性 服饰 为 主 的 网 站 通常 采用 该 色 
调 ， 如 图 19-7 所 示 。 


19.3.2 ”华丽 色调 服饰 网 站 


华丽 色调 是 由 强 色调 和 深 色 调 为 主 的 配色 ， 形 成 浓重 、 充 实 的 感觉 ， 是 艳丽 、 豪 华 的 色调 ， 一 些 具 
有 贵族 气息 服饰 的 网 站 通常 采用 该 色调 ,如 图 19-8 所 示 。 
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图 19-7 潇洒 色调 服饰 网 站 图 19-8 华丽 色调 服饰 网 站 


19.3.3 ”优雅 色调 服饰 网 站 

优雅 色调 是 以 汝 色 为 中 心 的 稳重 色调 。 配 色 细腻 、 对 比 度 差 ， 形 成 女性 化 的 优雅 气氛 .如 图 19-9 
所 示 。 
19.3.4 清爽 色调 服饰 网 站 

清爽 色调 是 以 白色 和 清 色 等 冷色 为 主 构成 的 ， 清 汶 夷 朗 ， 使 服饰 具有 单纯 而 干净 的 感觉 ,如 图 19-10 
所 示 。 














364 





OMPHALOS 2 












图 19-9 优雅 色调 服饰 网 站 图 19-10 清 更 色调 服饰 网 站 


19.3.5 自然 色调 服饰 网 站 


自然 色调 是 以 黄 、 绿 色相 为 主 构成 的 配色 ， 有 时 候 再 加 上 少量 深 颜 色 ， 称 重 而 柔和 ， 是 朴素 的 自然 
情调 ,体现 了 服饰 的 休闲 、 自 然 风格 .如 图 19-11 所 示 。 


19.3.6 动感 色调 服饰 网 站 


动感 色调 由 鲜 、 强 色调 的 暖色 色彩 为 主 配 成 ， 是 典型 的 色相 配色 ， 形 成 生动 、 鲜 明 、 强 烈 的 色彩 感 
觉 ， 通常 适合 一 些 年 轻 男女 服饰 的 网 站 ， 如 图 19-12 所 示 。 
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图 19-11 自然 色调 服饰 网 站 图 19-12 动感 色调 服饰 网 站 


19.3.7” 娇 美 色调 服饰 网 站 
娇 美 色调 是 由 浅 色 和 粉色 组 成 的 ， 以 暖色 系 为 主 ， 可 以 表现 服饰 的 天 真 可 爱 、 甜 美 而 有 活力 。 
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文本 是 网 页 中 最 常见 的 元 素 之 一 。 在 Dreamweaver 中 .人 允许 用 户 为 网 页 插入 各 种 文本 、 水 平 线 以 及 
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特殊 符号 等 。 本 节 主 要 讲述 网 页 文本 .内容 包 括 插入 文本 、 插 入 特殊 符号 、 插 入 水 平 线 和 插入 时 间 日 期 。 
用 户 通过 本 节 的 学 习 可 以 简单 了 解 网 页 文本 .为 后 面 的 网 站 建设 商定 基础 。 


19.4.1 插入 文本 


在 Dreamweaver 中 .支持 以 以 下 三 种 方式 为 网 页 文档 插入 文本 。 
1. 直接 输入 

直接 输入 是 最 常用 的 插入 文本 的 方式 。 在 Dreamweaver 中 创建 一 个 网 页 文档 ， 即 可 直接 在 【设计 视 
图 】 中 输入 英文 字母 ， 或 切换 到 中 文 输入 法 输入 中 文字 符 ， 如 图 19-13 所 示 。 


用 
让 我 们 都 是 来 自 五 湖 四 海 ， 为 了 一 个 共同 的 革命 目标 ， 走 到 一 起 来 了 。 我 们 还 要 和 全 
上 国 大 多 数 人 民 走 这 一 条 路 。 我 们 今天 已 经 领导 着 有 九 千 一 百 万 人 口 的 根据 地 ， 但 是 
日 还 不 跑 ， 还 要 更 大 些 ， 才 能 取得 全 民族 的 解放 。 我 们 的 同志 在 困难 的 时 候 ， 要 看 到 月 
要 看 到 光明 ， 要 提高 我 们 的 勇气 。 中 国人 民 正 在 受难 ， 我 们 有 责任 解救 他 们 ， 手 
辐 和 要 奋斗 就 会 有 牺牲 ， 死 人 的 事 是 经 常 发 生 的 。 但 是 我 们 想到 人 民 的 
3 利益 ， 想 到 大 多 数 人 民 的 痛苦 ， 我 们 为 人 民 而 死 ， 就 是 死 得 其 所 。 不 过 ， 我 们 应 当 上 
| 量 地 诚 少 那些 不 必要 的 牺牲 。 我 们 的 干部 要 关心 每 一 个 战士 ， 一 切 革命 队伍 的 人 都 
要 互相 关心 ， 互 相爱 护 ,taxiang 
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图 19-13 直接 输入 


2. 粘贴 文本 
除 直 接 输 入 外 ,用 户 还 可 以 在 其 他 软件 或 文档 中 将 文本 复制 到 剪贴 板 中 .然后 再 切换 至 Dreamweaver， 
右 击 执行 【粘贴 】 命 令 或 按 ChltV 组 合 键 ， 将 文本 粘贴 到 网 页 文档 中 ， 如 图 19-14 所 示 。 
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图 19-14 粘贴 文本 


3. 导入 文本 

第 三 种 方式 是 导入 已 有 的 Word 文档 或 Excel 文档 。 在 Dreamweaver 中 . 将 光标 定位 到 导入 文本 的 位 
置 ， 然 后 执行 【文件 】|【 导 入 】|【Word 文档 】 命 令 (或 【文件 】|【 导 入 】| 【Excel 文档 】 命 令 ) .选择 
要 导入 的 Word 文档 或 Excel 文档 . 即 可 将 文档 中 的 内 容 导入 到 网 页 文档 中 .如 图 19-15 所 示 。 








网 页 设计 与 网 站 建设 自学 经 典 : 


网 页 设计 与 网 站 建设 自学 经 典 
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(a) 导入 Word 文 档 
图 19-15 ”导入 文本 


19.4.2 ”插入 特殊 符号 


Dreamweaver 除了 人 允许 用 户 插 入 文本 外 ， 还 允许 
用 户 为 网 页 输入 各 种 特殊 符号 。 在 Dreamweaver 中 
执行 【插入 】|【 特 殊 字 符 】 命 令 ， 即 可 在 弹出 的 菜单 
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(b) 导入 Excel 文档 
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中 选择 各 种 特殊 符号 。 或 者 在 【插入 】 面 板 中 ， 在 列 











表 菜单 中 选择 【文本 】， 然后 单 击 面板 最 下 方 的 按钮 右 





侧 箭头 ， 亦 可 在 弹出 的 菜单 中 选择 各 种 特殊 符号 。 





Dreamweaver 允许 为 网 页 文档 插入 12 种 基本 的 特 
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殊 符号 , 除了 这 12 种 符号 以 外 , 用 户 还 可 选择 【其 他 
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字符 】 在 弹出 的 【插入 其 他 字符 】 对 话 框 中 选择 更 多 


1 上 |+lmlwloc| 加 -|w 
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的 字符 ， 如 图 19-16 所 示 。 


19.4.3 插入 水 平 线 





很 多 网 页 都 使 用 水 平 线 将 不 同类 的 内 容 隔 开 。 在 Dreamweaver 上 





图 19-16 











插入 其 他 字符 


Ph， 用户 也 可 方便 地 插入 水 平 线 。 执 


行 【 插 入 】 | HTML | 【水 平 线 】 命 令 ，Dreamweaver 就 会 在 光标 所 在 的 位 置 插入 水 平 线 ， 如 图 19-17 所 示 。 
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19-17 插入 水 平 线 
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19.4.4 插入 时 间 日 期 


Dreamweaver 还 支持 为 网 页 插入 本 地 计算 机 当前 的 时 间 和 日 期 。 执 行 【 插 入 】| 【日 期 】 命 令 ， 或 在 【 插 
入 】 面 板 中 ,在 列表 菜单 中 选择 【常用 】. 然后 单 击 【 日 期 】. 即 可 打开 【插入 日 期 】 对话 框 , 如 图 19-18 所 示 。 





























时 间 格 式 : [[ 不 要 时 间 ] 可 
因 依存 时 自动 更 新 








图 19-18 ”插入 日 期 时 间 


19.5 


在 制作 网 页 时 ,文本 是 必 不 可 少 的 组 成 部 分 。 但 是 .默认 文本 格式 无 法 满足 网 页 设计 的 需求 ， 这 就 
需要 设置 文本 的 属性 ， 如 字体 、 字 号 、 颜 色 、 样 式 等 。 本 节 主 要 讲述 网 页 文本 样式 ， 内 容 包括 标题 样式 、 
字体 样式 、 文 本 大 小 和 文本 颜色 。 用 户 通过 本 节 的 学 习 可 以 简单 了 解 网 页 文本 样式 ， 为 后 面 的 网 站 建设 
奠定 基础 。 


19.5.1 标题 样式 


在 Dreamweaver 中 ,设置 格式 可 以 更 改 网 页 中 所 选 文本 的 标题 样式 。 例如， 将 “诗歌 ”标题 设置 为 
“标题 1” 样 式 ， 如 图 19-19 所 示 。 















































3 





图 19-19 标题 样式 


19.5.2 字体 样式 
通过 为 文本 设置 字体 ， 可 以 从 外 观 上 改变 字体 的 样式 ， 从 而 产生 不 同 的 视觉 效果 。 例 如 ， 选 择 诗歌 
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内 容 文 字 ， 打开 【属性 】 面 板 ， 在 【字体 】 下 拉 列 表 中 设置 字体 种 类 .如 图 19-20 所 示 。 





























Ea 
《<> mm 目标 规则 依 内 隧 桩 式 > 了 中富 EO 己 BHst > - ~ 生生 @ 
[css] CE | [cs perieer | | 大 小 6) 无 = -5 
[i EE] 








图 19-20 字体 样式 


19.5.3 文本 大 小 


为 了 突出 网 页 中 的 某 些 内 容 ， 可 以 改变 文本 的 大 小 。 例 如 .选择 诗歌 内 容 文字 ， 在 【大 小 】 下 拉 列 
表 中 选择 12， 即 将 文字 的 大 小 更 改 为 12px， 如 图 19-21 所 示 。 























居住 

《> wm。 目标 抽风 作 内 磋 相 式 > "mooss ~- ~ -车 天 当下 加 
[cs ER [Se 大 ai -| 加 芭 
中 单元 格 水平 习 ) 时 认 | 完 m 不 需 行 Oo) 门 。 从 景 而 色 6) 站] 和 

ml Te 4 








图 19-21 文本 大 小 


19.5.4 文本 颜色 


默认 情况 下 ， 在 网 页 中 输入 的 文本 是 黑色 的 ， 但 是 为 了 搭配 网 页 的 设计 风格 或 突出 某 些 内 容 ， 用 户 
可 以 根据 需求 将 文本 颜色 更 改 为 其 他 颜色 。 例 如 单 击 【 文 本 颜色 】 按 钮 ， 在 弹出 的 【 拾 色 器 】 对 话 框 中 
设置 颜色 ， 如 图 19-22 所 示 。 








常 吃 海带 给 头发 上 色 





"Ons ~ 
JR [Ssasses] | 大 小 S) ee -前 | 


三 | 单元 格 。 水 平 吕 )[ 属 中 对 齐 “=] 寓 0 不 执行 0) 门 。 共 景 古色 () 全 [| 
已 北大 区 A -| 两 人 0 5 本 四 日 ， 


图 19-22 文本 颜色 


19.6 


本 章 概要 性 地 介绍 了 网 站 中 的 文本 样式 .主要 内 容 有 服饰 类 网 站 类 型 、 服 饰 类 网 站 设计 风格 、 服 饰 
网 站 色调 分 析 、 网 页 文本 、 文 本 样式 .为 本 书后 续 的 学 习 打下 坚实 的 基础 。 主 要 讲述 如 何在 网 站 建设 中 
应 用 文本 样式 .制作 吸引 人 的 网 站 的 一 些 方法 和 相关 技术 . 接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进 
行 实践 。 


19.6.1 实战 : 制作 服饰 类 网 站 首页 
服装 类 网 站 是 一 个 展示 性 平台 . 使 用 了 大 量 的 图 片 来 展示 最 新 的 品牌 服装 、 服 装 信息 等 。 在 网 站 的 
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版 面 设 计 上 ， Banner 与 导航 栏 的 设计 需要 仔细 商 梭 。 通 过 Banner 和 与 Banner 相同 色调 的 色 块 把 整个 版 
面 划分 为 横 式 或 纵 式 结构 ， 然 后 再 配合 图 标 和 文字 的 留 白 ， 使 网 页 显得 内 容 丰 富 而 不 杂乱 。 在 颜色 搭配 
上 ,应 该 突出 网 站 清新 时 尚 、 富 有 活力 的 特点 .主要 练习 添加 文本 、 设 置 文本 样式 、 添 加 段落 、 设 置 段 
落 样式 和 插入 图 片 ， 如 图 19-23 所 示 。 


* 2012 夏季 时 尚 服 装 设计 大 师 
2313 summer Pason Oelhes Pettts Naher 





图 19-23 制作 服饰 类 网 站 首页 


STEP|01 新 建 一 个 空白 网 页 ， 并 在 【标题 】 文 本 框 中 输入 文字 “服装 时 尚 “。 然 后 ， 单 击 【 属 性 】 面 板 
中 的 【页 面 属 性 】 按 钮 ， 并 在 【页 面 属性 】 对 话 框 中 设置 文档 的 上 下 边 距 均 为 0， 如 图 19-24 一 图 19-26 
所 示 。 
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图 19-25 【属性 】〗 面 板 
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网 页 设计 与 网 站 建设 自学 经 典 
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图 19-26 【页 面 属性 】 对 话 框 
STEP|02 单 击 【 插 入 】 | HTML | Table 按钮 ， 在 网 页 中 插入 一 个 2 行 1 列 、 宽 度 为 950 像素 的 表格 ， 
并 设置 第 1 行 背景 色 为 黑色 。 设 置 第 2 行 高 度 为 24 像素 ， 并 将 该 行 拆 分 为 7 列 ， 以 放置 快速 链接 文字 . 
如 图 19-27 一 图 19-31 所 示 。 
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图 19-29 设置 第 1 行 背景 色 为 黑色 
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图 19-30 设置 第 2 行 高 度 为 24 像素 
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图 19-31 拆 分 为 7 列 
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STEP|03 在 第 2 行 第 1 个 单元 格 和 第 2 个 单元 格 中 插入 配套 光盘 相应 目录 中 的 图 片 , 并 设置 本 行 其 余 单 
元 格 背景 色 为 黑色 ， 如 图 19-32 一 图 19-34 所 示 。 
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图 19-32 图 片 








= ~ ] 有 -i 加 
n Me OmmaoF Ho0h No nm, - 

wn a 

DETY 肌 om 


图 19-33 【属性 】 面 板 





图 19-34 页 面 效果 








STEP|04 在 第 3 列 单元 格 中 添加 “网 站 首页 ”文字 链接 。 在 【插入 】 面 板 中 单 击 Hyperlink 按钮 ， 然 后 
在 Hyperlink 对 话 框 中 设置 各 项 参数 ， 如 图 19-35 和 图 19-36 所 示 。 









































BE Duey MebleeE| = 下 
HTML 
回 miv 到 
回 “Inage 
国 。 段落 
了 标题 : Heroup 文本 : .网 站 首页 CE 
国 Tale 链接 - index, htal ~ 名 取消 
图 Pier 目标 : -Menk = 地 助 
TEN | 
ul 项目 列表 bad i 
访问 刍 - 
ol ”编号 列表 Tab 键 索引 
li 列表 项 
BHyperlink 三 
图 19-35 【插入 】 面 板 图 19-36 ”Hyperlink 对 话 框 


STEP|05 在 网 页 中 直接 使 用 默认 的 链接 效果 往往 不 能 满足 实际 的 需要 , 因此 , 在 此 处 为 本 网 页 中 的 链接 
添加 了 链接 样式 并 添加 链接 样式 内 容 。 一 般 要 为 链接 设置 a: link、a: hover、a: visited 三 个 CSS 样式 ， 
这 里 设置 的 三 个 链接 样式 内 容 是 一 样 的 ， 如 图 19-37 所 示 。 

STEP|06 在 快速 链接 栏 的 下 方 为 网 站 的 Banner, 在 切割 时 也 是 将 其 切割 为 单独 的 一 部 分 . 然后 使 用 一 个 
表格 将 其 插入 到 网 页 中 ， 如 图 19-38 所 示 。 

STEP|07 在 表格 中 输入 Banner 文字 部 分 ， 要 为 其 加 上 CSS 样式 ， 以 便 控 制 其 显示 格式 。 在 网 页 中 插入 
一 个 1 行 3 列 、 宽 度 为 950 像素 的 表格 ( 暂 称 为 表格 1) ， 并 在 两 侧 的 单元 格 中 插入 配套 光盘 相应 目录 中 
的 图 片 ， 如 图 19-39 所 示 。 
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网 页 设计 与 网 站 建设 自学 经 典 





a:link { 
font-family: "宋体 "; 
font-size: 12px; 
color: #FFFFFF; 
text-decoration: none; 


} 

a:visited { 
font-family: "宋体 "; 
font-size: 12px; 
color: #FFFFFF; 
text-decoration: none; D2 > be 


} 

a:hover { 
font-family: "宋体 "; 
font-size: 12px; 
color: #FFFFFF; 
text-decoration: none; 


} 
图 19-37 CSS 样式 代码 


图 19-38 页 面 效 果 
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图 19-39 表格 中 输入 Banner 文字 部 分 


STEP|08 在 中 间 单 元 格 中 插入 一 个 宽度 为 890 像素 、1 行 2 列 的 广 套 表格 ( 暂 称 为 表格 2). 


格 为 居中 对 齐 显示 ， 如 图 19-40 所 示 。 
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图 19-40 ”插入 嵌 套 表格 


STEP|09 设置 表格 2 堪 侧 的 单元 格 为 水 平方 向 上 居中 对 齐 , 垂直 方向 上 顶端 对 齐 方式 , 如 图 19-41 所 示 。 
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图 19-41 设置 表格 2 





并 设置 该 表 


STEP|10 插入 两 个 表格 : 第 1 个 表格 中 插入 了 配套 光盘 相应 目录 中 的 图 片 ; 第 2 个 表格 拆 分 为 5 行 , 并 





像 ， 如 图 19-42 所 示 。 











在 其 中 插入 5 个 鼠标 经 过 图 
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图 19-42 ”鼠标 经 过 图 像 
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STEP|ITI 依据 上 述 步骤 将 其 余 鼠标 经 过 图 像 插 入 。 然 后 . 在 该 单元 格 中 插入 第 三 个 
表格 , 并 在 该 表格 中 插入 配套 光盘 相应 目录 中 的 图 片 . 并 设置 图 片 链 接 . 如 图 19-43 
所 示 。 
STEP|12 正文 部 分 是 由 一 个 单独 的 表格 来 实现 的 ,在 表格 2 的 右 侧 单元 格 中 插入 一 
个 表格 .并 设置 其 水 平和 垂直 方向 上 均 为 居中 对 齐 显示 。 将 该 表格 拆 分 为 4 个 单元 
格 . 并 在 每 个 单元 格 中 插入 一 个 宽度 为 329 像素 的 5 行 2 列 的 表格 . 用 来 放置 4 个 



































内 容 不 同 的 版 块 ， 如 图 19-44 所 示 。 图 19-43 页 面 效 果 
FF 行 Q)5 ”| 次 mJFeo | 他 表 =] Celipwd 0 lie [居中 双 章 | Drs 无 @ 
一 -casz sp — se 号 
IT DB 
Eb a 
图 19-44 表格 


STEP|13 在 每 个 版 块 所 在 的 表格 中 , 其 第 一 行 单元 格 用 
来 放置 版 块 标题 。 第 二 行 则 放置 最 能 够 表达 本 版 块 中 心 
的 内 容 ， 一 般 分 为 两 列 ， 第 一 列 放置 图 片 ， 第 二 列 放置 
内 容 。 剩 下 三 列 则 放置 一 些 相关 内 容 ， 如 图 19-45 所 示 。 
STEP|14 依据 上 述 步骤 可 插入 其 他 版 块 , 并 输入 相关 内 
容 。 版 尾部 分 放置 在 一 个 宽度 为 950 像素 的 3 行 1 列 的 
表格 中 。 在 第 1 行 与 第 3 行 中 分 别 插入 配套 光盘 相应 目 
录 中 的 图 片 ， 而 第 2 行 则 拆 分 为 3 列 ， 左 右 两 侧 插入 配 半 19.45， 音 元 咎 肉 容 

套 光盘 相应 目录 中 的 图 片 。 中 间 列 则 先 设置 背景 色 ， 然 

后 在 其 中 插入 一 个 嵌 套 表格 ， 并 输入 相关 版 尾 信息 。 至 此 ， 首 页 部 分 制作 完成 ， 将 文档 保存 ， 并 按 F12 
键 打开 正 进行 预览 ， 如 图 19-46 所 示 。 


19.6.2 ”实战 : 制作 网 站 子 页 


为 了 保持 整个 网 站 中 所 有 页 面 版 式 的 统 
一 . 子 页 的 制作 采用 了 与 主页 相同 的 版 式 ， 不 
同 之 处 在 于 子 页 中 导航 栏 右 侧 的 部 分 显示 的 是 
与 子 页 中 心 相关 的 内 容 ， 主 要 练习 添加 图 片 、 
添加 表格 、 设 置 表格 属性 、 添 加 文本 和 设置 文 
本 样式 。 
STEP|01 将 主页 另存 为 5 个 网 页 ,并 分 别 命名 国 19-45 拟 入 条 全 版 类 
为 FZCL.html、 FZZX.html、FZDPhtml、FZPPhtml、 ‘DW 去 号 可 综 号 ( 避 坦 者 (W 括 入 Qj 站 改 (M) | 格式 (Oj 命令 
FZZS.html。 打开 FZCL.html 文档 ， 在 该 文档 中 , 将 【st 2 
原 主页 中 正文 部 分 所 在 的 表格 删除 ， 并 插入 一 个 同 
样 宽度 的 表格 .如 图 19-47 所 示 。 
STEP|02 将 插入 的 表格 拆 分 为 三 行 .并 在 每 行 中 分 图 19-47 将 主页 另存 为 5 个 网 页 
别 输入 相应 的 文字 内 容 。 然 后 分 别 为 各 行文 字 添加 CSS 样式 ， 以 增加 视觉 效果 。 在 第 三 行 的 文字 之 后 插 
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入 配套 光盘 相应 目录 中 的 图 片 。 以 更 好 地 表达 文字 内 容 ， 如 图 19-48 所 示 。 


把 me fadee Oo begs Welt 





图 19-48 服装 潮流 


STEP|03 依据 制作 “服装 潮流 ”的 操作 步骤 制作 “服装 咨询 ” “服装 搭配 ” 子 页 ， 如 图 19-49 和 图 19-50 
所 示 。 





图 19-50 服装 搭配 
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STEP|04 在 “服装 品牌 ” 子 页 中 .首先 插入 一 个 宽度 为 660 像素 的 表格 ,然后 再 将 其 拆 分 为 4 列 , 并 设 
置 每 个 单元 格 的 高 度 为 100 像素 ,恰好 可 以 容纳 插入 的 图 片 ， 并 可 空 出 适当 的 间隙 ,视觉 效果 较 好 ,如 
图 19-51 所 示 。 
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图 19-51 服装 品牌 





STEP|05 在 “服装 展示 ” 子 页 中 , 首先 插入 一 个 宽度 为 660 像素 的 3 行 3 列 的 表格 . 并 将 最 下 方 的 三 个 
单元 格 合并 。 在 第 1、2 行 单元 格 中 插入 配套 光盘 相应 目录 中 的 图 片 ， 在 第 3 行 中 则 输入 与 本 页 中 心 相关 
的 文字 ， 并 使 用 CSS 样式 来 控制 其 格式 。 制 作 好 的 “服装 展示 ” 子 页 效果 如 图 19-52 所 示 。 

















图 19-52 服装 展示 





XHTML+CSS 


HTML 语法 要 求 比较 松散 ,这样 对 网 页 编写 者 来 说 比较 方便 , 但 对 于 机 器 来 说 , 语言 的 语法 越 松散 
处 理 起 来 就 越 困 难 。 因 此 产生 了 由 DID 定义 规则 ， 语 法 要 求 更 加 严格 的 XHTML。 与 层 琶 式样 式 表 结合 
后 . XHTML 能 发 挥 真 正 的 威力 一 一 这 使 实现 样式 与 内 容 分 离 的 同时 . 又 能 有 机 地 组 合 网 页 代码 , 在 另外 
的 单独 文件 中 ， 还 可 以 混合 各 种 XML 应 用 ,例如 MathML、SVG。 

本 章 将 详细 介绍 XHTML+CSS， 主 要 内 容 有 企业 类 网 站 概述 、XHTML 基本 语法 、 常 用 的 块 状元 素 、 
常见 的 内 联 元 素 、 层 的 样式 和 综合 实战 。 通 过 本 章 的 学 习 我 们 可 以 知道 怎样 在 网 站 中 应 用 XHTML+CSS。 
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企业 在 网 络 中 建立 网 站 是 有 目的 性 的 ， 有 些 企业 是 想 借助 网 站 宣传 自己 的 品牌 和 形象 ， 有 些 是 想 展 
示 自 身 的 产品 ， 还 有 一 些 企业 就 是 想 通过 网 站 来 销售 商品 ， 有 的 则 兼 而 有 之 。 通 过 这 些 信息 可 以 确定 企 
业 对 网 站 的 要 求 是 侧重 设计 方面 还 是 功能 方面 。 根 据 不 同 的 建站 目的 ， 企 业 网 站 的 设计 风格 也 会 有 所 不 
同 。 本 节 主 要 讲述 企业 类 网 站 概述 .内 容 主要 包括 明确 创建 网 站 的 目的 和 用 户 需 求 、 总 体 设计 方案 主题 
鲜明 、 网 站 的 版 式 设 计 、 色 彩 在 网 页 设计 中 的 应 用 、 多 媒体 功能 的 利用 、 内 容 更 新 与 沟通 和 网 站 风格 的 
统一 性 。 用 户 通 过 本 节 的 学 习 可 以 了 解 企业 类 网 站 .为 后 面 的 网 站 建设 奠定 基础 。 


20.1.1 明确 创建 网 站 的 目的 和 用 户 需求 


Web 站 点 的 设计 是 展示 企业 形象 、 介 绍 产品 和 服务 ， 体 现 企业 发 展 战略 的 重要 途径 ， 因 此 必须 明确 
设计 站 点 的 目的 和 用 户 需求 ， 从 而 做 出 切实 可 行 的 设计 计划 。 要 根据 消费 者 的 需求 、 市 场 的 状况 、 企 业 
自身 的 情况 等 进行 综合 分 析 ， 牢 记 以 “消费 者 ”为 中 心 ， 而 不 是 以 “美术 ”为 中 心 进 行 设计 规划 。 

在 设计 规划 之 初 , 同样 要 考虑 建站 的 目的 是 什么 、 为 谁 提供 服务 、 企 业 能 提供 什么 样 的 产品 和 服务 、 
消费 者 和 受众 的 特点 是 什么 、 企业 产品 和 服务 适合 什么 样 的 表现 方式 等 . 如 图 20-1 所 示 的 电子 产品 网 站 。 


20.1.2 总体 设 计 方 案 主题 鲜明 
在 目标 明确 的 基础 上 ， 完成 网 站 的 构思 创意 即 总 体 设计 方案 ， 对 网 站 的 整体 风格 和 特色 做 出 定位 ， 
规划 网 站 的 组 织 结 构 。Web 站 点 应 该 针对 不 同 的 服务 对 象 呈 现 不 同 的 形式 ， 有 些 网 站 只 提供 简洁 的 文本 


信息 ， 有 些 则 采用 了 多 媒体 表现 手法 ， 提 供 华丽 的 图 像 、 闪 烁 的 灯光 、 复 杂 的 页 面 布 置 ， 甚 至 可 以 下 载 
声音 和 录像 片段 ， 如 图 20-2 所 示 。 


























Touchscreen 


Interface 





图 20-1 电子 产品 类 网 站 图 20-2 主题 鲜明 


优秀 的 网 站 会 把 图 形 表现 手法 和 网 站 主题 有 效 地 组 织 起 来 . 做 到 主题 鲜明 突出 、 要 点 明确 。 首 先 以 
简单 明确 的 语言 和 画面 体现 站 点 的 主题 ， 然 后 调动 一 切 手 段 充 分 表现 网 站 的 个 性 和 情趣 ,体现 出 网 站 的 
特点 。 
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20.1.3 网 站 的 版 式 设 计 


网 页 设计 作为 一 种 视觉 语言 . 应 讲究 编排 和 布局 。 
虽然 主页 的 设计 不 等 同 于 平面 设计 ， 但 是 它们 有 许多 
相近 之 处 ， 应 充分 加 以 利用 和 借鉴 。 版 式 设计 通过 文 
字 图 形 的 空间 组 合 ， 表达 出 和 谐 与 美观 。 一 个 优秀 的 
网 页 设计 者 也 应 该 知道 文字 图 形 落 于 何 处 才能 使 整个 
网 页 生 辉 ， 如 图 20-3 所 示 。 

多 页 面 站 点 的 编排 设计 要 求 页 面 之 间 的 有 机 联 
系 ， 特别 要 处 理 好 页 面 之 间 和 页 面 内 秩序 与 内 容 的 关 
系 。 为 了 达到 最 佳 的 视觉 表现 效果 .还 需要 讲究 整体 
布局 的 合理 性 ， 使 浏览 者 有 一 种 流畅 的 视觉 体验 。 


20.1.4 色彩 在 网 页 设计 中 的 应 用 


色彩 是 艺术 表现 的 要 素 之 一 。 在 网 页 设计 中 ， 根 
据 和 谐 、 均 衡 和 重点 突出 的 原则 ， 将 不 同 的 色彩 进行 
组 合 、 搭 配 来 构成 美观 多 彩 的 页 面 。 网 页 的 颜色 应 用 并 没有 数量 的 限制 ， 但 是 不 能 毫 无 节制 地 运用 多 种 
颜色 ， 一 般 情况 下 应 首先 根据 总 体 风格 的 要 求 定 出 一 至 两 种 主 色调 ,如果 有 CIS (企业 形象 识别 系统 ) , 
更 应 该 按照 其 中 的 VI 进行 色彩 运用 .如 图 20-4 所 示 。 


20.1.5 多 媒体 功能 的 利用 


网 络 资源 的 优势 之 一 是 多 媒体 功能 。 要 吸引 浏览 者 的 注意 力 ， 页 面 的 内 容 可 以 用 三 维 动画 、Flash 等 
来 表现 ， 如 图 20-5 所 示 。 但 是 要 注意 ,由 于 网 络 带宽 的 限制 ， 在 使 用 多 媒体 的 形式 表现 网 页 的 内 容 时 
应 该 考虑 客户 端的 传输 速度 。 
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图 20-3 网 站 的 版 式 设计 
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图 20-4 色彩 在 网 页 设计 中 的 应 用 图 20-5 多 媒体 功能 的 利用 
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20.1.6 ”内 容 更 新 与 沟通 


第 20 章 XHTML+CSS 





创建 企业 网 站 后 ,还 需要 不 断 更 新 其 内 容 。 站 点 信息 的 不 断 更 新 ， 可 以 让 浏览 者 了 解 企业 的 发 展 动 


态 . 同 时 也 会 帮助 企业 建立 良好 的 形象 在 企业 的 Web 
站 点 中 ， 要 认真 回复 用 户 的 电子 邮件 和 传统 的 联系 方 
或 ;六 
好 将 用 户 的 用 意 进行 分 类 .如 售 前 产品 概况 的 了 解 、 
售后 服务 等 ， 将 其 交 由 相关 部 门 处 理 。 如 果 要 求 访问 
者 自愿 提供 个 人 信息 ,应 公布 并 认真 履行 个 人 隐私 保 























信件 、 电 话 垂询 和 传真 等 ， 做 到 有 问 必 答 . 最 so 


ep a 
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证 承诺 。 7 
20.1.7 网 站 风格 的 统一 性 


企业 的 网 站 设计 应 有 统一 的 风格 ， 例如 ， 整 站 的 
页 面 布局 、 用 图 用 色 ， 页面 元 素 与 网 站 内 容 中 使 用 的 
名 词 都 应 统一 ， 否 则 会 给 用 户 带 来 杂乱 无 章 的 感觉 ， 
如 图 20-6 所 示 。 


20.2 


相 比 传统 的 HTML 4.0 语言 , XHTML 语言 的 语法 更 加 严谨 和 规范 ,更 易于 各 种 程序 解析 和 判读 。 本 
节 主 要 讲述 XHTML 基本 语法 ,内 容 主要 包括 XHTML 文档 结构 、XHTML 文档 类 型 声明 、 XHTML 语法 
规范 与 XHTML 标准 属性 。 用 户 通过 本 节 的 学 习 可 以 了 解 XHTML 基本 语法 ,为 后 面 的 网 站 建设 奠定 
基础 。 


20.2.1 XHTML 文档 结构 


作为 一 种 有 序 的 结构 性 文档 ，XHTML 文档 需要 遵循 指定 的 文档 结构 。 一 个 XHTML 文档 应 包含 两 
个 部 分 , 即 文档 类 型 声明 和 XHTML 根 元 素 部 分 .在 根 元素 <html> 中 ,还 应 包含 XHTML 的 头 部 元 素 <head> 
与 主体 元 素 <body>。 

在 XHTML 文档 中 ， 内 容 主要 分 为 三 级 ， 即 标签 、 属 性 和 属性 值 。 
1. 标签 

标签 是 XHTML 文档 中 的 元 素 ， 其 作用 是 为 文档 添加 指定 的 各 种 内 容 。 例 如 .输入 一 个 文本 段落 
可 使 用 段落 标签 <p> 等 。XHTML 文档 的 根 元 素 <html>、 头 部 元 素 <head> 和 主体 元 素 <body> 等 都 是 特殊 的 
标签 。 
2. 属性 

属性 是 标签 的 定义 ， 其 可 以 为 标签 添加 某 个 功能 。 几 乎 所 有 的 标签 都 可 添加 各 种 属性 。 例 如 ,为 某 
个 标签 添加 CSS 样式 ， 可 为 标签 添加 style 属性 。 
3. 属性 值 

属性 值 是 属性 的 表述 ,用 于 为 标签 的 定义 设置 具体 的 数值 或 内 容 程度 。 例如. 为 图 像 标签 <img> 设 置 
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图 20-6 网 站 风格 的 统一 性 
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图 像 的 URL 地址. 就 可 以 将 URL 地 址 作为 属性 值 . 添加 到 src 属性 中 。 
20.2.2 ”XHTML 文档 类 型 声明 


文档 类 型 声明 是 XHTML 语言 的 基本 声明 .其 作用 是 说 明 当 前 文档 的 类 型 以 及 文档 标签 、 属 性 等 的 
使 用 范本 。 

文档 类 型 声明 的 代码 应 放置 在 XHTML 文档 的 最 前 端 . XHTML 语言 的 文档 类 型 声明 主要 包括 三 种 ， 
即 过 渡 型 、 严 格 型 和 框架 型 。 
1. 过 渡 型 声明 

过 渡 型 的 XHTML 文档 在 语法 规则 上 最 为 宽松 ， 人 允许 用 户 使 用 部 分 描述 性 的 标签 和 属性 。 其 声明 的 
代码 如 下 : 





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtml1l/DTD/xhtmll-transitional.dtd"> 


2. 严格 型 声明 
严格 型 的 XHTML 文档 在 语法 规则 上 最 为 严格 ， 其 不 允许 用 户 使 用 任何 描述 性 的 标签 和 属性 。 其 声 
明 的 代码 如 下 : 
<!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
3. 框架 型 声明 
框架 的 功能 是 将 多 个 XHTML 文档 嵌入 到 一 个 XHTML 文档 中 ， 并 根据 超 链接 确定 文档 打开 的 框架 
位 置 。 框 架 型 的 XHTML 文档 具有 独特 的 文档 类 型 声明 ， 如 下 所 示 : 








<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3. 
org/TR/xhtmll1/DTD/xhtmll-frameset.dtd"> 


20.2.3 XHTML 语法 规范 


XHTML 是 根据 XML 语法 简化 而 成 的 , 因此 它 遵 循 XML 的 文档 规范 。 虽 然 某 些 浏览 器 (如 Internet 
Explorer 浏览 器 ) 可 以 正常 解析 一 些 错误 的 代码 ， 但 仍然 推荐 使 用 规范 的 语法 编写 XHTML 文档 。 因 此， 
在 编写 XHTML 文档 时 应 该 遵循 以 下 几 点 。 

1. 声明 命名 空间 

在 XHTML 文档 的 根 元 素 <html> 中 应 该 定义 命名 空间 ， 即 设置 其 xmins 属性 ,将 XHTML 各 种 标签 
的 规范 文档 URL 地 址 作为 xmlns 属性 的 值 。 

2. 闭合 所 有 标签 

在 HIML 中 , 通常 习惯 使 用 一 些 独立 的 标签 ， 如 <p>、<li> 等 ， 而 不 会 使 用 相对 应 的 <p> 和 < 人 li> 标 签 
对 其 进行 闭合 。 在 XHTML 文档 中 .这 样 做 是 不 符合 语法 规范 的 。 如 果 是 不 成 对 的 标签 ， 应 该 在 标签 的 
最 后 加 一 个 “/” 对 其 进行 闭合 ,如 <br 信 、<img 人 >。 

3. 所 有 元 素 和 属性 必须 小 写 

与 HIML 不 同 . XHTML 对 大 小 写 十 分 敏感 ,所 有 的 元 素 和 属性 必须 是 小 写 的 英文 字母 .例如 . <html> 

和 <HTMI> 表 示 不 同 的 标签 。 
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4. 所 有 属性 必须 用 引号 括 起 来 

在 HIML 中 ,不 需要 为 属性 值 加 引号 ， 但 是 在 XHTML 中 则 必须 加 引号 . 例如 “<table width = 
"120"></table>"。 
5. 合理 赃 套 标签 

XHTML 具有 严谨 的 文档 结构 . 因此 所 有 的 标签 都 应 该 按 顺序 嵌 套 。 也 就 是 说 ,元素 是 严格 按照 对 称 
原则 一 层 一 层 地 谋 套 在 一 起 的 。 

错误 广 套 : 














<div><span></div></span> 


正确 说 套 : 





<div><span></span></div> 





在 XHTML 的 语法 规范 中 还 有 一 些 严 格 的 谋 套 要 求 . 例如 所 有 属性 都 必须 被 赋值 。 在 HTML 中 , 人 允 
许 没有 属性 值 的 属性 存在 ， 如 <td nowrop>。 但 在 XHTML 中 ， 这 种 情况 是 不 允许 的 。 如 果 属性 没有 值 , 
则 需要 使 用 自身 来 赋值 。 





<td nowrop = "nowrop"> 


20.2.4 XHTML 标准 属性 


标准 属性 是 绝 大 多 数 XHTML 标签 可 使 用 的 属性 。 在 XHTML 的 语法 规范 中 有 三 类 标准 属性 ， 即 核 
心 属性 、 语 言 属性 和 键盘 属性 。 
1. 核心 属性 

核心 属性 的 作用 是 为 XHTML 标签 提供 样式 或 提示 信息 ,在 这 4 种 属性 中 ，class 属性 的 值 为 字母 、 
下 画 线 与 数字 的 集合 ， 要求 以 字母 和 下 画 线 开头 ; id 属性 的 值 与 class 属性 类 似 ， 但 其 在 同一 XHTML 文 
档 中 是 唯一 的 ， 不 允许 重复 :style 属性 的 值 为 CSS 代码 。 
2. 语言 属性 

XHTML 语言 的 语言 属性 主要 包括 两 种 ， 即 dir 属性 和 lang 属性 。dir 属性 的 作用 是 设置 标签 中 文本 
的 方向 ,其 属性 值 主要 包括 ltr ( 自 左 至 右 ) 和 世 ( 自 右 至 左 ) 两 种 。lang 属性 的 作用 是 设置 标签 所 使 用 
的 自然 语言 ， 其 属性 值 包括 en-us (美国 英语 )、zh-cn (标准 中 文 ) 和 zh-tw (繁体 中 文 ) 等 多 种 。 
3. 键盘 属性 

XHTML 语言 的 键盘 属性 主要 用 于 为 XHTML 标签 定义 响应 键盘 按键 的 各 种 参数 。 其 同样 包括 两 种 ， 
即 accesskey 和 tabindex。 其 中 ,accesskey 属性 的 作用 是 设置 访问 XHTML 标签 所 使 用 的 快捷 键 . tabindex 
属性 则 是 用 户 在 访问 XHTML 文档 时 使 用 Tab 键 的 顺序 。 


4 有 权 量 常用 的 块 状元 素 


块 状元 素 作为 其 他 元 素 的 容器 .通常 用 来 对 网 页 进行 布局 。 本 节 主 要 讲述 常用 的 块 状元 素 ， 内 容 主 
要 包括 div、 岂 、ol、1、dl、dt、dd、 定 义 列表 、p、table、tr、td、h1、h2、h3、h4、hs 和 h6。 用 户 通 过 
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:网 页 设计 与 网 站 建设 自学 经 典 :::: 


本 节 的 学 习 可 以 了 解 常用 的 块 状元 素 . 为 后 面 的 网 站 建设 芮 定 基础 。 


20.3.1 div 


div 作为 通用 块 状元 素 ， 在 标准 网 页 布局 中 








是 最 常用 的 结构 化 元 素 。 





div 元 素 表示 文档 结构 块 . 它 可 以 把 文档 划分 为 多 个 有 意义 的 区 域 或 模块 。 因 此 ,使 用 div 可 以 实现 
网 页 的 总 体 布局 ， 并 且 是 网 页 总 体 布局 的 首选 元 素 。 





例如 , 用 三 个 div 元 素 划分 了 三 大 块 区 域 . 

















这 些 区 域 分 别 属于 版 头 、 主 体 和 版 尾 。 然 后 ,在 版 头 和 主 








体 区 域 分 别 又 用 了 多 个 div 元 素 再 次 细 分 为 更 小 的 单元 区 域 . 这样 便 可 以 把 一 个 网 页 划分 为 多 个 功能 模 


块 。 例 如 : 
<div><!--[ 版 头 区 域 ]--> 


<div><!--[Logo]--></div> 
<div><!--[ 导 航 ]--></div> 


</div> 
<div><!1-- [主体 区 域 ] --> 


<div><!--[ 模 块 1]--></div> 
<div><!--[ 模 块 2]--></div> 


</div> 


<div> 
<!--[ 版 尾 区 域 ] --> 
</div> 

20.3.2 ul、 ol 和 i 


由 、ol 和 上 元 素 用 来 实现 普通 的 项 目 列表 ， 


它们 分 别 表示 无 顺序 列表 、 有 顺序 列表 和 列表 中 的 项 目 。 


但 在 通常 情况 下 ,结合 使 用 ul 和 1i 定 义 无 序 列表 .结合 使 用 ol 和 上 定义 有 序列 表 。 
列表 元 素 全 是 块 状元 素 , 其 中 的 元 素 显示 为 列表 项 . 即 display:list-item., 这 种 显示 样式 也 是 块 状元 
素 的 一 种 特殊 形式 。 列 表 元 素 能 够 实现 网 页 结构 化 列表 .对 于 常常 需要 排列 显示 的 导航 菜单 、 新 闻 信息 、 





标题 列表 等 ， 使 用 它们 具有 较为 明显 的 优势 。 
无 序列 表 : 
<ul> 
<1i> 项 目 </1i> 
<li> 项 目 </1i> 
<1i> 项 目 </1i> 


</ul> 





无 序列 表 效 果 如 图 20-7 所 示 。 
有 序列 表 : 
<ol> 
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<li> 项 目 </1i> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 


区 
































有 序列 表 效 果 如 图 20-8 所 示 。 

PR ee Po 
3 .项 目 1 项 目 

3 项 目 2. 项目 

目 项 目 3. 项 目 

站 

















图 20-7 无 序列 表 效果 图 图 20-8 有 序列 表 效 果 图 


20.3.3 dl、dt 和 dd 


dl、dt 和 dd 元 素 用 来 实现 定义 项 目 列表 。 定 义 项 目 列表 原本 是 为 了 呈现 术语 解释 而 专门 定义 的 一 组 
元 素 ， 术 语 项 格 显示 ， 术 语 的 解释 缩 进 显示 . 这样 多 个 术语 排列 时 显得 规整 有 序 ， 但 后 来 被 扩展 应 用 到 
网 页 的 结构 布局 中 。 

dl 表示 定义 列表 : dt 表示 定义 术语 ， 即 定义 列表 的 标题 ，dd 表示 对 术语 的 解释 ， 即 定义 列表 中 的 

















项 目 。 
ch WW 标题 列表 项 
20.3.4 定义 列表 人 
3 标题 列表 项 
定义 列表 的 代码 举例 如 下 : “标题 说 明 
<dl> 可 
<dt> 标 题 列 表 项 </dt> 
<dd> 标 题 说 明 </dd> 
<dt> 标 题 列 表 项 </dt> 
<dd> 标 题 说 明 
</dd> 
</qdl> 
定义 列表 效果 如 图 20-9 所 示 。 图 20-9 定义 列表 效果 图 
20.3.5 p 





了 元素 是 块 状元 素 . 用 来 设置 段落 。 在 默认 情况 下 . 每 个 文本 段 都 定义 了 上 下 边界 , 具体 大 小 在 不 同 
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网 页 i 





的 浏览 器 中 会 有 区 别 。 块 状元 素 的 代码 举例 如 下 : 


<P> 关 于 “香港 ”地 名 的 由 来 ， 有 西 种 流传 较 广 的 说 法 。</P> 

<p> 说 法 一 : 香港 的 得 名 与 香料 有 关 。 从 明 朝 开始 ， 香 港 岛 南部 的 一 个 小 港湾 ， 为 转运 南粤 香料 的 集散 港 ， 
因 转 运 产 在 广东 东莞 的 香料 而 出 名 ,被 人 们 称 为 “香港 "。</p> 

<P> 说 法 二 : 香港 是 一 个 天 然 的 港湾 ， 附 近 有 溪水 甘 香 可 口 ， 海 上 往来 的 水 手 经 常 到 这 里 来 取水 饮用 ， 久 
而 久之 ， 甘 香 的 溪水 出 了 名 ， 这 条 小 溪 也 就 被 称 为 “香江 ， 而 香江 入 海 冲 积 成 的 小 港湾 ， 也 就 开始 被 称 为 “ 香 
港 "。</p> 








Pp 元素 效果 如 图 20-10 所 示 。 











关于 “ 乔 港 "地 名 的 由 来 ， 有 两 种 流传 较 广 的 说 法 。 
阿 说 法 一 ， 香港 的 得 名 与 香料 有 关 。 从 明 朝 开始 ， 香 洁 岛 南部 的 一 个 小 湾 洁 ， 


东 碗 的 香料 而 出 名 ， 被 人 们 称 为 ” ey 





运 南 四 香料 的 集散 法， 园 转运 产 在 广 芭 


站 说 法 二 ， 理 洪 是 一 个 天 伏 的 出 这 本 车 可 呈 ， 光 人 的 水 玫 经 到 
这 里 亲 取 水 饮用 ， 人 久而久之 ， 甘 香 的 溪水 出 了 名 ， 这 条 小 肖 也 就 被 称 为 “香江 ”， 而 
! 香江 入 海神 积 万 的 小 港 注 ， 和 香港 "。 
|’ 
| 









图 20-10 Pp 元 素 效 果 图 


20.3.6 table、 tr 和 td 


table、 人 t 和 td 元 素 被 用 来 实现 表格 化 数据 显示 ， 它 们 都 是 块 状元 素 。 

table 表示 表格 ， 它 主要 用 来 定义 数据 表格 的 包含 框 。 如 果 要 定义 数据 表 整 体 样式 应 该 选择 该 元 素来 
实现 ， 而 数据 表 中 数据 的 显示 样式 则 应 通过 td 元 素来 实现 

tf 表示 表格 中 的 一 行 ， 由 于 它 的 内 部 还 需要 包含 单元 格 ， 所 以 在 定义 数据 表格 样式 上 ， 该 元 素 的 作 
用 并 不 太 明显 。 

td 表示 表格 中 的 一 个 方 格 。 该 元 素 作为 表格 中 最 小 的 容器 元 素 ， 可 以 放置 任何 数据 和 元 素 。 但 在 标 
准 布局 中 不 再 建议 用 世 来 实现 谋 套 布局 ， 而 仅 作为 数据 最 小 单元 格 来 使 用 。 

表格 的 代码 举例 如 下 














<table width="580" border="1"” cellpadding="0" cellspacing="0"> 
<tr> 

<td>gnbsp; </td> 

<td align="center"><strong> 一 班 </strong></td> 
<td align="center"><strong> 二 班 </strong></td> 
<td align="center"><strong> 三 班 </strong></td> 
<td align="center"><strong> 四 班 </strong></td> 
<td align="center"><strong> 五 班 </strong></td> 


<td align="center"><strong> 评 分 </strong></td> 


<td align="center">A</td> 





<td align="center">C</td> 
<td align="center">B</td> 
<td align="center">E</td> 
<td align="center">D</td> 
</tr> 
</table> 














table、tr 和 td 元 素 效 果 如 图 20-11 所 示 。 
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图 20-11 


20.3.7 h1、h2、h3、h4、h5 和 h6 


table、tr 和 td 元 素 效果 图 


hl、h2、h3、h4、h5 和 h6 六 个 元 素 的 第 1 个 字母 h 为 header (标题 ) 的 首 字母 缩写 , 后面 的 数字 表 


示 标 题 的 级 别 。 
使 用 hl~h6 元 素 可 以 定义 网 页 标题 , 其 





其 他 元 素 以 此 类 推 。 





h hl 表示 一 级 标题 , 字号 最 大 ; h2 表示 二 级 标题 , 字号 较 小 ， 


标题 元 素 是 块 状元 素 ，CSS 和 浏览 器 都 预定 义 了 h1~h6 元 素 的 样式 .hl 元 素 定义 的 标题 字号 最 大 


h6 元 素 定义 的 标题 字号 最 小 。 
<div align="center"> 
<h2> 静 夜 思 </h2> 
<p> 床 前 明 月 光 ， 
疑 是 地 上 霜 。 </p> 
<p> 举 头 望 明月 ， 
低头 思 故 乡 。</P> 
</div> 


p41 用 站 常见 的 内 联 元 素 


内 联 元 素 由 于 无 固定 形状 ， 因 此 不 可 以 使 用 CSS 定义 大 小 、 边 框 和 层 又 顺序 等 。 本 节 主 要 讲述 常见 
的 内 联 元 素 ， 内容 主 要 包括 a、br、img、span、button。 用 户 通过 本 节 的 学 习 可 以 了 解 常见 的 内 联 元 素 . 




















为 后 面 的 网 站 建设 奠定 基础 。 
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20.4.1 a 





a 元 素 用 于 表示 超 链接 。 在 网 页 中 . a 元素 主要 有 两 种 使 用 方法 : 一 种 是 通过 href 属性 创建 从 本 网 页 
到 另 一 个 网 页 的 链接 : 另 一 种 是 通过 name 或 id 属性 . 创建 一 个 网 页 内 部 的 链接 。 
外 部 链接 示例 : 


<a href="http://www.baidu.com"> 百 度 一 下 </a> 
内 部 链接 示例 : 
<a href="#1ink"> 内 部 链接 </a> 

20.4.2 br 


br 元 素 用 于 表示 换行 。 在 HTML 中 ,br 元 素 可 以 单独 使 用 。 但 在 XHTML 中 ,br 元素 必须 在 结尾 处 
关闭 ， 即 <br/>。 






































20.4.3 img [Es WT .TT MTP MYR TIFT TT TTI RT TTR AT LTT, 
间 

img 元 素 用 于 表示 网 页 中 的 图 像 元 素 。 与 br 元 素 上 

相同 ， 在 HTML 中 ，img 元 素 可 以 单独 使 用 。 但 在 上 bf 

XHTML 中 。img 元 素 必须 在 结尾 处 关闭 , 例如 ， 大 SN 
<img alt=" 图 像 元 素 " src="image.jpg" /> 目 2 
img 元 素 效 果 如 图 20-12 所 示 。 上 | 、 分 
另外 , 在 XHTML 中 ， 所 有 的 img 元 素 必须 添加 < ms | 

alt 属性 ， 也 就 是 图 像 元 素 的 提示 信息 文本 。 图 20-12 img 元 素 效果 图 

20.4.4 span 








span 用 于 表示 范围 ， 是 一 个 通用 内 联 元 素 。 该 元 素 可 以 作为 文本 或 内 联 元 素 的 容器 ， 通 常 为 文本 或 
者 内 联 元 素 定义 特殊 的 样式 、 辅 助 并 完善 排版 、 修 饰 特定 内 容 或 局 部 区 域 等 。 示 例 代码 如 下 : 














<div> 

<span><!-- 设 置 字 体 大 小 --> 

<span title=" 标 题 "> 带 标题 的 文本 </span> 
<span><strong> 加 粗 显示 </strong></span> 





PP TP -PPP i: EPPP + PPPPR ru, FPPPL +- PERE ue PE ETT 1 TPE tr RPP BD 
span 元 素 





<span><em> 斜 体 显 示 </em></span> 
</span> 
</div> 





span 元 素 效果 如 图 20-13 所 示 。 图 20-13 span 元 素 效果 图 
20.4.5 button 








在 网 页 中 .button 元 素 主要 用 于 定义 按钮 。 该 元 素 可 以 作为 容器 . 允许 在 其 中 放置 文本 或 图 像 。 
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文本 按钮 示例 : 


<button name="btn"” type="submit"> 提 交 </button> 








图 像 按 钮 示例 : 








<button name="btn" type="submit"><img src="image.jpg" /></button> 


button 元 素 效 果 如 图 20-14 所 示 。 
tr TPP FPP ,FPP PFT PT FFPPPF FPPPR ED 
button 元 素 


















































图 20-14 button 元 素 效果 图 
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在 标准 化 的 XHTML 中 ,所 有 网 页 元 素 的 样式 都 是 通过 CSS 定义 的 。 层 也 是 一 种 网 页 元 素 ， 因 此 该 
规则 对 层 同 样 适用 。 本 节 主 要 讲述 层 的 样式 .内 容 主要 包括 网 页 元 素 的 位 置 和 层 全 顺序、 网 页 元 素 的 边 
框 以 及 网 页 元 素 的 大 小 。 用 户 通 过 本 节 的 学 习 可 以 了 解 层 的 样式 .为 后 面 的 网 站 建设 奠定 基础 。 


20.5.1 ”网 页 元 素 的 位 置 和 层 双 顺序 


CSS 在 XHTML 的 布局 中 最 重要 的 属性 就 是 定位 与 层 倒 属性 。 通 过 定位 与 层 倒 属性 ， 可 以 控制 层 或 
其 他 网 页 元 素 的 位 置 以 及 显示 于 网 页 中 的 优先 级 。 设 置 层 的 位 置 , 首先 要 为 其 设置 position 属性 , position 
属性 用 于 设置 网 页 布局 元 素 的 定位 方式 。 

当 设置 position 属性 为 absolute 或 fixed、relative 后 ， 即 可 使 用 left、right、top 和 bottom4 个 属性 为 
网 页 元 素 定 位 。 其 中 .left 代表 网 页 元 素 最 左 侧 与 父 元 素 边框 的 距离 . right 代表 网 页 元 素 最 右 侧 与 父 元 素 
边框 的 距离 ,top 代表 网 页 元 素 最 项 端 与 父 元 素 边框 的 距离 bottom 代表 网 页 元 素 最 底部 与 父 元 素 边框 的 
距离 。 这 4 个 网 页 元 素 的 单位 都 是 px (像素 ) 。 

例如 ， 定 位 一 个 层 的 位 置 为 距离 网 页 项 部 20px、 距 离 网 页 左 侧 30px， 代 码 如 下 所 示 。 

































































#apdivl 1{ 
/* 定 义 ID 为 apdivl 的 网 页 元 素 CSS 样式 */ 
position:absolute; 


/* 设 置 其 定位 方式 为 绝对 定位 */ 





. 
ee 
日 





top:20px; left:30px; 
/* 设 置 其 距离 顶部 距离 为 20px， 距 离 左 侧 距 离 为 30px*/ 
} 


通常 对 于 普通 的 网 页 元 素 只 需要 设置 top 和 left 两 个 属性 即 可 。 

相对 于 表格 . 层 还 可 以 设置 层 琶 顺序 . 即 相同 位 置 的 层 在 网 页 中 显示 的 优先 级 。 这 就 需要 设置 z-index 
属性 。 

z-index 翻译 成 中 文 就 是 Z 轴 . 其 值 为 整数 值 。 数值 越 大 . 则 网 页 元 素 显示 的 优先 级 越 高 。 例 如. z-index 
值 为 10 的 网 页 元 素 ， 将 覆盖 在 z-index 值 为 9 的 网 页 元 素 上 方 。 代 码 如 下 所 示 : 











#apdivlz9 { 
position:absolute; 
/* 定 位 方式 为 绝对 */ 
z-index:9; 

/*Z 轴 值 为 9*/ 

} 

#apdiv2z10 { 
position:absolute; 
/* 定 位 方式 为 绝对 */ 
z-index:10; 

/*2Z 轴 值 为 10*/ 

} 


20.5.2 ”网 页 元 素 的 边框 


在 网 页 中 ， 所 有 的 网 页 布局 元 素 都 可 设置 其 边框 。 边 框 的 属性 主要 有 边框 线 的 类 型 、 宽 度 以 及 颜色 
三 种 。 
1. 边框 线 的 类 型 

在 CSS 2.0 中 , 共 支 持 8 种 边框 线 类 型 。 设 置 这 8 种 边框 线 类 型 需要 使 用 border-style 类 属性 。 例 如 
设置 网 页 元 素 的 边框 线 为 凸 出 线 ， 其 代码 如 下 所 示 : 











#table0l1 { 

/*ID 为 table01 的 网 页 元 素 的 样式 */ 
border-style: outset; 

/* 边 框 线 的 样式 为 突出 线 */ 

} 





如 需 设置 网 页 元 素 4 条 边框 线 的 线 类 型 各 不 相同 ， 可 以 为 border-style 设置 多 个 属性 值 。 

当 border-style 仅 有 一 个 值 时 . 这 个 值 将 控制 4 条 边框 线 的 样式 。 当 border-style 有 两 个 值 时 . 第 一 个 
值 将 控制 项 部 与 底部 边框 线 的 样式 . 第 二 个 值 将 控制 左 侧 和 右 侧 边框 线 的 样式 ,代码 如 下 所 示 : 

#borderdiv { 

border-style:solid dashed; 

/* 网 页 元 素 的 顶部 和 底部 边框 线 为 实 线 ， 左 侧 和 右 侧 边框 线 为 虚线 */ 

} 
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当 border-style 有 三 个 值 时 ,第 一 个 值 将 控制 项 部 边框 线 的 样式 .第 二 个 值 将 控制 左 侧 和 右 侧 边框 线 
的 样式 .第 三 个 值 将 控制 底部 边框 线 的 样式 .代码 如 下 所 示 : 

#borderdiv { 

border-style:solid dashed dotted; 

/* 网 页 元 素 顶 部 边框 线 为 实 线 ， 左 侧 和 右 侧 边框 线 为 虚线 ， 底 部 边框 线 为 点 画 线 */ 

} 


当 border-style 有 4 个 值 时 ， 则 这 4 个 值 分 别 为 项 部 、 右 侧 、 底 部 、 左 侧 4 条 边框 的 样式 ， 代 码 如 下 
所 示 : 


#borderdiv { 

border-style:solid dashed dotted solid; 

/* 网 页 元 素 顶 部 边框 线 为 实 线 ， 右 侧 边 框 线 为 虚线 ， 底 部 边框 线 为 点 画 线 ， 左 侧 边 框 线 为 实 线 */ 
} 


设置 网 页 元 素 的 4 条 边框 ,还 可 以 使 用 border-style 的 4 个 复合 属性 。 例 如 ， 要 设置 网 页 元 素 顶 部 和 
底部 边框 线 为 实 线 ， 左 侧 和 右 侧 无 边框 线 ， 代 码 如 下 所 示 : 


#borderdiv { 
border-top-style:solid; 

/* 顶 部 边框 线 为 实 线 */ 
border-right-style:none; 
/* 右 侧 无 边框 线 */ 
border-bottom-style:solid; 
/* 底 部 边框 线 为 实 线 */ 
border-left-style:none; 

/* 左 侧 无 边框 线 */ 

} 


2. 边框 的 宽度 
在 设置 边框 宽度 时 ， 需 要 使 用 border-width 属性 。border-width 属性 的 值 分 两 种 ， 即 相对 宽度 值 和 绝 
对 数值 。 例 如 ， 需 要 设置 网 页 元 素 的 宽度 为 中 等 ， 代 码 如 下 所 示 : 








#newdiv { 

/* 设 置 ID 为 newdiv 的 网 页 元 素 样式 */ 
border-width:medium; 

/* 边 框 宽度 为 中 等 宽度 */ 

有 











border-style 属性 也 可 以 设置 多 个 属性 值 ， 使 用 方法 和 border-width 相同 。 
如 需 将 网 页 元 素 的 4 条 边框 设置 为 各 不 相同 的 宽度 . 还 可 以 使 用 border-style 属性 的 5 种 复合 属性 。 
例如 ， 设置 网 页 的 顶部 边框 宽度 为 2px、 底 部 边框 宽度 为 4px， 代码 如 下 所 示 : 


#borderdiv { 


border-style:solid; 
/* 定 义 边框 线 为 实 线 */ 
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border-top-width:2px; 

/* 定 义 顶 部 边框 线 宽度 为 2px*/ 
border-right-width:0px; 
/* 定 义 右 侧 边 框 线 宽度 为 Opx*/ 
border-bottom-width:4px; 
/* 定 义 底部 边框 线 宽度 为 4px*/ 
border-left-width:0O0px; 
/* 定 义 左 侧 边框 线 宽度 为 0px*/ 
} 


3. 边框 的 颜色 


默认 情况 下 ， 边 框 线 的 颜色 与 网 页 元 素 中 的 文本 颜色 一 致 。 如 需 自 定义 边框 的 颜色 ， 可 使 用 
border-color 属性 ， 使 用 方法 和 border-width、border-style 相同 。 


20.5.3 网 页 元 素 的 大 小 
在 遵循 CSS 2.0 的 网 页 编辑 器 和 浏览 器 中 . 所 有 的 网 页 布局 元 素 都 被 视 为 一 个 矩形。 设置 这 个 矩形 的 
大 小 ， 就 是 设置 其 宽度 和 高 度 。 


设置 网 页 元 素 的 宽度 和 高 度 的 CSS 属性 共 6 个 , 这 6 种 属性 的 属性 值 类 型 完全 相 
例如 ， 需 要 设置 网 页 元 素 的 宽度 为 父 元 素 宽度 的 100%、 高 度 为 40px， 代 码 如 下 所 示 : 





























. 主要 包括 三 种 。 





#maintable { 

width:100%; 

/* 定 义 网 页 元 素 的 宽度 为 父 元 素 宽度 的 100%*/ 
height:40px; 

/* 网 页 高 度 为 40px*/ 

} 


若 需 要 使 网 页 元 素 根据 其 内 容 自动 适应 高 度 和 宽度 .但 又 需要 给 其 添加 一 个 限制 ， 则 可 使 用 相对 值 ， 
代码 如 下 所 示 : 

#maintable { 

min-width:90%; 

max-width:95%; 

/* 网 页 元 素 根 据 其 内 容 自 动 伸缩 宽度 ， 最 小 宽度 为 父 元 素 宽度 的 90%， 最 大 宽度 为 父 元 素 宽度 的 95%*/ 

} 


A | 


本 章 概要 性 地 介绍 XHTML+CSS， 主 要 内 容 有 企业 类 网 站 概述 、XHTML 基本 语法 、 常 用 的 块 状 元 
素 、 常 见 的 内 联 元 素 、 层 的 样式 ， 为 本 书后 续 的 学 习 打 下 坚实 的 基础 。 主 要 讲述 如 何在 网 站 建设 中 应 用 
XHTML+CSS， 制 作 吸 引 人 的 网 站 的 一 些 方法 和 相关 技术 ， 接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进 
行 实践 。 
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20.6.1 实战: 设计 软件 公司 网 页 界面 


企业 网 页 的 特点 就 是 包含 多 种 栏目 内 容 显 示 ， 如 公司 动态 、 公 司 简介 等 。 同 时 ,企业 网 页 中 各 栏目 
的 内 容 应 保持 一 致 的 风格 。 在 设计 企业 网 页 的 界面 时 ， 可 先 设计 网 页 的 Logo、 导 航 条 等 版 块 ， 然 后 再 设 
计 统 一 的 栏目 界面 ， 并 通过 复制 组 和 内 容 实 现 栏 目 风格 以 统一 。 

在 设计 本 例 的 过 程 中 ， 对 文字 的 处 理 使 用 到 了 【文字 】 工 具 、 【字符 】 面 板 以 及 【段落 】 面 板 ， 对 按 
钮 、 界 面 等 图 像 的 处 理 使 用 了 【样式 】〗 面 板 和 图 层 蒙 版 等 技术 。 除 此 之 外 ， 本 例 还 使 用 了 各 种 导入 的 图 
像 ， 主要 练习 设置 背景 、 插 入 文字 、 使 用 图 案 填充 、 色 彩 饱和 度 、 画 笔 工 具 ， 如 图 20-15 所 示 。 



























































SD. 软件 公司 


SD 绿色 通道 
开启 您 成 功 之 门 
而 一 们 这 妨 化 加 具 解 方案 


所 旋 介 做 披 提 和 窜 户 和 产 力 
放风 癌 户 条 力行 此 中 的 绸 








图 20-15 设计 软件 公司 网 页 界面 


1. 设计 网 页 背景 

打开 Photoshop， 执行 【文件 】| 【新建 】 命 令 , 打开 【新 建 】 对 话 框 ， 并 设置 文档 的 宽度 和 高 度 分 别 
为 1003px 和 1153px， 然 后 设置 分 辩 率 为 72 像素 /英寸 、 颜 色 模 式 为 RGB 颜色 。 然 后 单 击 【 确 定 】 按 
钮 创建 文档 。 

单 击 【 图 层 】 面 板 中 的 【创建 新 图 层 】 按 钮 ， 单 击 工具 栏 中 的 【和 矩形 工具 】 按 钮 ， 在 “图 层 1” 中 绘 
制 一 个 矩形 ， 并 用 【油漆 桶 工具 】 填 充 颜色 为 “ 蓝 色 ”(#e597b) 。 单 击 【 创 建新 图 层 】 按 钮 ， 新 建 “图 
层 2 ”， 然 后 单 击 【 和 矩形 工具 】 按 钮 ,绘制 一 个 矩形 。 单 击 【 渐 变 工 具 】 按 钮 ， 然 后 单 击 渐变 色 块 ,在 弹 
出 的 【渐变 编辑 器 】 中 设置 三 个 色 标 。 

在 “图 层 2” 中 间 ， 从 上 到 下 拖 动 鼠标 。 然后, 新建 “图 层 3”， 单 击 【 套 索 工具 】 按 钮 ,在 “图 层 3” 
中 绘制 不 规则 图 形 ， 并 填充 为 “白色 ”(#fff) 。 新 建 “ 图 层 4 ， 用 【和 矩形 工具 】 绘 制 一 个 矩形 ， 并 填充 
为 “白色 ”(#HEPPF) ， 然 后 ,调整 “图 层 3” 的 大 小 。 

2. 设计 网 站 Logo 和 导航 条 

新 建 名 为 Logo 的 组 .然后 单 击 【 横 排 文 字 工 具 】 按 钮 .在 组 中 创建 两 个 文本 图 层 . 输入 文本 。 打 开 
【字符 】 面 板 , 设置 相应 的 参数 。 双 击 “SD.” 文 本 图 层 . 弹出 【图 层 样式 】 对 话 框 . 添加 【投影 】 和 【 渐 
变 直 加】 样式 .并 设置 参数 。 
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在 工具 栏 中 选择 【 横 排 文 字 ] 工具 . 输入 文本 . 并 在 【字符 】 面板 中 设置 文字 属性 。 然后 将 图 像 "birdjpg 
拖 入 图 层 。 新 建 名 为 nav 的 组 .在 组 中 新 建 navBG 图 层 . 并 在 图 层 中 绘制 一 个 809pxx44px 的 矩形 选区 
右 击 执行 【填充 】 命 令 ， 为 导航 条 填充 背景 。 

在 工具 栏 中 ， 单 击 【 横 排 文 字 工具 】 按 钮 ， 输入 导航 文本 ， 并 打开 【字符 】 面 板 ， 设 置 文字 属性 。 
3. 设计 网 站 banner 

新 建 名 为 banner 的 组 ， 在 组 中 新 建 bannerBG 图 层 . 并 在 图 层 中 绘制 一 个 809pxx260px 的 和 矩形 选区 
右 击 执行 【填充 】 命 令 ， 填 充 颜 色 为 “ 蓝 色 ”(#dcecf7) 。 单 击 【 横 排 文 字 工 具 】 按 钮 ， 添 加 文本 ， 并 打 
开 【 字 符 】 面 板 . 设置 文本 属性 。 新 建 名 为 bbmBG 的 图 层 , 并 单 击 【 和 矩形 工具 】 按 钮 . 绘制 一 个 110pxx44px 
的 和 矩形， 并 添加 【渐变 又 加】 【 描 边 】 图 层 样 式 。 在 工具 栏 中 , 单 击 【 横 排 文 字 工具 】 按 钮 ， 输 入 文本 
“更 多 信息 “， 并 打开 【字符 】 面 板 ， 设 置 文本 参数 。 然 后 将 图 像 “bannerjpg” 拖 入 banner 组 中 。 
4. 设计 栏目 版 块 

新 建 名 为 homel 的 组 ,在 组 中 新 建 omelBG 图 层 . 并 在 图 层 中 绘制 一 个 809pxx176px 的 矩形 选区 , 
右 击 执行 【填充 】 命令. 为 homel 填充 颜色 “ 淡 黄 色 ”(#f2f3eb)。 将 图 像 拖 入 homel 组 中 , 然后 单 击 【 横 
排 文 字 工 具 】 按 钮 ， 输 入 文本 ， 并 打开 【字符 】 面 板 设置 文本 参数 。 

按照 相同 的 方法 ， 在 homel 组 中 创建 “产品 与 服务 “联系 方式 ”两 个 栏目 版 块 并 进行 设置 ， 然 后 
依次 将 各 个 版 块 的 内 容 放 入 组 中 。 新 建 名 为 home2 的 组 ， 在 组 中 新 建 line 图 层 ， 并 在 图 层 中 绘制 一 个 
250pxx2px 的 细 线 ,填充 颜色 为 灰色 (#eaeaea) 。 然 后 单 击 【 移 动工 具 】〗 选 择 细 线 ,复制 两 条 相同 的 细 线 。 

单 击 【 横 排 文 字 工 具 】 按 钮 ,输入 文本 ,并 打开 【字符 】 面 板 . 设置 文 本 参数 。 然 后 再 创建 名 为 “新 
闻 动态 ”的 组 ， 将 该 版 块 的 内 容 放 入 组 中 。 按 照相 同 的 方法 ， 新 建 名 为 “公司 简介 ”的 组 。 在 组 中 新 建 
line 图 层 ， 并 在 图 层 中 绘制 一 个 450pxx2px 的 细 线 ,填充 颜色 为 “灰色 ” (#eaeaea) 。 然 后 单 击 【 移 动工 
具 】 选 择 细 线 ,复制 一 条 相同 的 细 线 。 单 击 【 横 排 文 字 工具 】 按 钮 ， 输 入 文本 ， 并 打开 【字符 】 面 板 
设置 文本 参数 。 将 图 像 “ib.gif ” 拖 入 名 为 “公司 简介 ”的 组 中 ， 并 复制 一 次 ， 移 动 到 相应 位 置 ， 然 后 在 
对 应 的 图 像 后 输入 文本 ， 并 打开 【字符 】 面 板 设置 文本 参数 。 
5. 设计 网 页 版 尾 

新 建 footer 组 ， 然 后 在 组 中 新 建 footerLine 图 层 。 在 该 图 层 中 绘制 一 个 809pxx4px 的 线段 ， 并 填充 为 
黑色 。 打 开 Logo 所 在 的 组 .分 别 选 择 文 本 “SD.” 和 “软件 公司 "， 右 击 复制 图 层 , 放 入 到 名 为 footer 的 
组 中 ， 然 后 将 其 移动 到 文档 的 底部 。 单 击 【 横 排 文字 工具 】 按 钮 ， 输入 文本 ， 在 工具 栏 设 置 文本 字体 为 
“微软 雅 黑 "、 大 小 为 “12px” 、 消 除 锯齿 为 【锐利 ]、 对 齐 字体 方 式 为 【 右 对 齐 】、 颜色 为 “ 蓝 色 ”(#d6e8f5)， 
并 打开 【字符 】 面 板 设置 间距 为 “24px 。 使 用 【切片 工具 】 为 文档 制作 切片 ， 然 后 即 可 隐藏 所 有 文本 部 
分 , 将 PSD 文 档 导 出 为 网 页 。 

在 制作 完成 切片 之 后 ， 即 可 执行 【文件 】| 【存储 为 Web 和 设备 所 用 格式 】 命 令 ， 在 弹出 的 【存储 为 
Web 和 设备 所 用 格式 】 对 话 框 中 设置 切片 输出 的 图 像 格式 等 属性 ,将 PSD 文档 输出 为 网 页 。 


20.6.2 ”实战 : 制作 企业 网 站 页 面 


在 企业 网 站 页 面 设计 完成 以 后 ， 下 面 将 使 用 DreamWeaver 软件 将 设计 好 的 页 面 制 作成 网 页 。 本 例 将 
主要 使 用 DIV+CSS 样式 对 页 面 进行 布局 ,主要 练习 设置 标题 、 使 用 Div 层 、 设 置 宽 度 和 高 度 、 设 置 背景 
和 设置 图 片 大 小 ， 如 图 20-16 所 示 。 
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sD 姑 色 通道 
开启 黎 威 功 之 站 





图 20-16 制作 企业 网 站 页 面 


STEP|01 在 站 点 根 目录 下 创建 pages、images、styles 等 目录 . 将 切片 网 页 中 的 图 像 保 存 至 images 子 目录 
下 。 用 Dreamweaver 创建 网 页 文档 , 并 将 网 页 文档 保存 至 pages 子 目 录 下 。 然 后 再 创建 main.css 文档 , 将 
其 保存 至 styles 子 目录 下 。 修改 网 页 head 标签 中 title 标签 里 的 内 容 , 然后 在 title 标签 之 后 添加 link 标签 ， 
为 网 页 导入 外 部 的 CSS 文件 ， 如 图 20-17 所 示 。 


<title>SD 软 件 公 司 </title> 
<Link href="../styles/main.css" rel="stylesheet" type="text/css" /> 





图 20-17 CSS 样式 代码 
STEP|02 在 “main.css” 文 档 中 ,定义 网 页 的 body 标签 以 及 各 种 容器 类 标签 的 样式 属性 ， 如 图 20-18 所 示 。 
STEP|03 在 body 标签 中 使 用 div 标签 创建 网 页 的 基本 结构 ， 并 为 各 版 块 添加 和 这。 代码“<div 
id="logo"></div>” 用 于 存放 网 页 的 Logo 栏 版 块 , “<div id="nav"></div>” 用 于 存放 网 页 的 导航 栏 版 块 ， 
“<div id="banner"”></div> ”用 于 存放 网 页 的 banner 版 块 ， <div id="homel"></div><div 
id="home2"></div><!-- 网 页 的 内 容 版 块 --><div id="footer"></div> 用 于 存放 网 页 的 版 尾 版 块 。 
STEP|04 在 id 为 logo 的 div 容器 中 ,插入 一 个 id 为 contactUs 的 div 容器 , 并 在 main.css 文档 中 定义 这 
个 容器 的 样式 ， 制 作 网 页 的 Logo 版 块 ， 如 图 20-19 所 示 。 


body, td, th { /*logo*/ 


























font-size: 12px; Wogo { 
} height: le0px; 
body { ep 
margin-left: Opx; aa rile 
background- image:url(../images/home_92.gif) 
margin-top: Opx; } 
margin-right: Opx #logo #contactUs { 
margin-bottom: Opx; float: right; 
width:1663px3 height: 38px3 
background-image: url(../images/hbg.jpg); width: 150px; 
background-repeat: no-repeat; margin-top: 46px; 
background-color: #2e597b; Color :FFF; 
} } 
图 20-18 CSS 样式 代码 图 20-19 CSS 样式 代码 


STEP|05 在 ID 为 logo 的 div 容器 中 插入 两 个 p 标 签 , 在 第 1 个 p 标签 中 插入 图 像 “twittergif ,在 第 2 











网 页 设计 与 网 站 建设 自学 经 典 


网 页 设计 与 网 站 建设 自学 经 典 








个 p 标签 中 输入 文本 ， 如 图 20-20 所 示 。 
STEP|06 在 main.css 文档 中 为 两 个 p 标签 添加 高 度 、 浮 动 ， 边 距 等 CSS 样式 代码 ， 如 图 20-21 所 示 。 











#Logo #contactUS p { 
height: 30px; 
display:inline; 

E Line-height:30px; 
<div id="Logo"> 
<div id="contactUS"> 
<p> <img src="../images/twitter.gif™" width="23" height="29" /></p> 
<p> 欢 迎 与 我 们 联系 </p> 
</div> i 





图 20-20 CSS 样式 代码 图 20-21 CSS 样式 代码 





STEP|07 在 ID 为 nav 的 div 的 容 嚣 中文 套 一 个 列表 . 并 在 列表 中 将 导航 条 的 内 容 作为 列表 项 输入 , 如 图 
20-22 所 示 。 


<div id="nav"> 
<ul> 
<Li><a href="javascript:void(null);" title=" 首 页 "> 首 &nbsp; 页 </a></Ui> 
<Ui><a href="javascript:void(null);"” titLe=" 服 务 "> 服 anbsp; 务 </a></Li> 
<Li><a href="javascript:void(null titLe=" 产 品 "> 产 &nbspj 品 </a></Li> 
<Li><a href="javascript:void(null title=" 关 于 我 们 "> 关于 我 们 </a></1i> 
<Li><a href="javascript:void(null);"” titLe=" 博 客 "> 博 &nbsp; 客 </a></Li> 
<ti><a href="javascript:void(null);"” title=" 联 系 我 们 "> 联系 我 们 c/a></Ui> 
</ub 
</div> 





图 20-22 CSS 样式 代码 





STEP|08 在 main.css 文档 中 定义 项 目 列表 及 链接 文本 和 鼠标 经 过 时 文本 变化 的 样式 属性 ， 如 图 20-23 所 示 。 
STEP|09 在 ID 为 banner 的 div 容器 中 .分 别 插入 ID 为 bannerLeft.bannerRight 的 div 容器 ,并 在 "main.css” 
文档 中 定义 容器 的 样式 属性 ， 如 图 20-24 所 示 。 














sbanner { 
width:8e9px; 
height:290px; 
margin:© 96px; 
background-image:url(../images/hbg_banner_95.gif); 
} 
gbanner gbannerLeft { 
width:220px; 
height:45px; height:256px3 
float:left; 
margin-top:20px; 
padding-left:68px; 
Vine-height:26px; 





} 

#banner gbannerLeft .spl { 
font-size:29px; 
font-weight:bold; 








Line-height :3epx; 
} 
gbanner #bannerRight { 
font-size:16px; width:451px; 
font-weight:bold; background-image:url(../images/simple_text_img_3.png); 
font-family:" 哎 牧 共 民 " height:246px; 
3 text-decoration:none; float:left; 
anav ul Li a:hover { Er 
color:#0CF; margin-top:30px; 
} } 
图 20-23 CSS 样式 代码 图 20-24 CSS 样式 代码 
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STEP|10 在 ID 为 bannerLeft 的 div 层 中 . 插入 三 个 p 标签 . 并 在 标签 中 添加 相应 内 容 。 然 后 为 p 标签 添 
加 spl 类 ， 如 图 20-25 所 示 。 sb 
gnbsp;: se 





STEP|11 在 main.css 文 档 中 定义 p 标 签 所 添加 的 类 名 称 
为 spl 的 样式 属性 ， 如 图 20-26 所 示 。 

STEP|12 在 ID 为 homel 的 div 容器 中 谋 套 一 个 定义 列 
表 。 在 列表 项 <dt> 中 许 套 两 个 div 容器 ， 在 <dd> 标 签 中 
许 套 一 个 列表 ， 然 后 为 <d> 标 签 添 加 rows 类 ， 如 图 20-27 所 示 。 


<dl class="rows"> 
< 
<div class="tconTitle"> cing src= 
/ha what. png” width="56" height="6e" 
下 载 " /></div> 
<div class="textTitle"> 相 关 下 载 </div> 
cjde 
<dd> 
eu 
Sy ca href="Javascript;votd(null)j" tttle=" 
和 
</U> 

















图 20-25 CSS 样式 代码 





/hh 
title= 






<Ui2ca href="javascript: 

质量 管理 信息 系统 《网 千 版 》 渍 示 盘 下 

网 千 版 ) 演示 盘 下 载 </a></14> 
<Li><a href="™ i ‘void 


桥 凰 竞 融 计 分 及 规则 软件 *: TT 5 


idfnutUD in” title=" 
管理 信息 系统 〈 


#banner #bannerLeft .spl { 
font-size:26pxj 


mull);™ title=" 
件 far</Ui> 


chu 
font-weight:bold; diwca href="javascript:void(null);" title= 
Line-height:36pxj; 更 多 "> 更 多 .. .</a></div> 
</dd> 
} </db 


图 20-26 CSS 样式 代码 图 20-27 CSS 样式 代码 





STEPI13 在 main.css 文档 中 分 别 定义 类 rows、iconTitle、textTitle 及 列表 的 样式 属性 ， 如 图 20-28 所 示 。 
Whomel { 
width:721px; 
height:175px; 


background-color :#f2f3eb; 
margin:© 96px; 





padding:9 44px; 

} 

ghomel .rows { 
display:block; 
width:249pxj 
margin-top:Opx; 
margin-bottom:Opx; 
padding:epx; 
height:175px; 
float: left; 

} 

Whomel .rows dt { 
width:246px; 

} 2 

#homel .rows dt .iconTitle { shonel .rows dd ul { 
width:60px; Uist-style-type: none; 
height:60px; margin: 
float: left; } padding:©; 

1 Whomel .rows dd ul Ui a:Link, shomel .rows dd ul Ui 
float:right; a:visited { 
width: 18er text-decoration: none; 
bao Vine-height:20px; 

ee color :$646464; 
font-size:16px; } 
font-weight:bold; i nd 

a Vine-height:5epx; float: Veft; 

width: 288px; 

#homel .rows dd { padding-left: Opx; 
float: left; margin-top: 10px; 
height: B80px; } 
width: 246px; shomel .rows dd div a:link, shomel .rows dd div 
margin-left: Opx; a:visited { 
margin-top:10px; color :#35678f; 

} 》 


图 20-28 CSS 样式 代码 








网 页 网 ! 





设 自学 





STEP|14 按照 相同 的 方法 ,创建 “产品 与 服务 "、“ 联 系 方式 ”栏目 ， 如 图 
该 套 了 为 home2Leftf、home2Right 的 Div 容器 。 


STEP|15 在 ID 为 home2 的 div 容器 中 
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文档 中 分 别 定义 这 些 容器 的 样式 属性 ， 如 图 











<dl class="rows"> 
<dt> 
<div class="iconTitle"> <img src=" 
/images/h2_suport.png" width="56" height= 
"6e" /></div> 
<div class="textTitle"> 产 品 与 服务 </div> 
/dt> 
<dd> 
<utU> 
<li><a href="javascript:void(null);" 
title=" 普 及 版 一 主要 功能 模块 "> 普及 版 一 主要 功能 模块 
</a></Ui> 
<li><a href="javascript:void 
title=" 标准 版 一 主要 功能 模块 "> 标准 扬 一 : 
模块 </a></Li> 
<li><a href="javascript:void(null);" 
title=" 企 业 版 一 主要 功能 机 块 "> 企业 版 一 主要 功能 模块 
</a></Ui> 


null);" 
功能 














20-29 所 示 。 





20-30 所 示 。 


shome? { 


background-color: 


<div ctass="textTitten? 联 系 方式 cjdiv height :446px; 


/de> width:721px; 
<dd> margin:0 96p; 
eb padding:0 44px; 





<ti><a href="javascript:votd(null);" } 


title=" 联 系 人 : 王 经 理 "> 联系 人 : 于 经 理 </a></11> 


并 在 main.css 


WFFF; 





<fut> <tiy<a href="javascript:votd(null);" hom Cheaa32tLefE 《 
<div><a href="javascript:void(nutll);" title=" 地 址 : 深圳 国家 经 济 技术 开发 区 软件 国 "> 地 址 : width:256px; 
title=" 更 多 "> 更 多 ...</a></div> 深圳 国家 经 济 技术 开发 区 软件 园 </a></Ui> float:left; 
</dd> <Li><a href="javascript:void(null);" height:440px; 
</db> title=" 电 话 : 6371-657811)0(，657827XX"> 电 话 } 
< Glasssarowssy + 8371-65781D0、 657827 </a></U> #home2 #home2Right { 
ee Se OTA 
<div class="iconTitle"> <cimg src= titte=" 更 多 "> 更 多 .. .</a<jdivy 人 height:446px; 
"../images/h2_work.png" width="56" height="69， </dd> float:right; 
></div> </db } 


图 20-29 CSS 样式 代码 


STEP|16 在 ID 为 home2Left 的 div 容器 中 谋 套 定义 列表 . 在 列表 中 插入 水 和 





文本 ,创建 “新 闻 动 态 ” 栏 目 ， 如 图 20-31 所 示 。 


<div id="home2Left"> 
<dl> 
<dt class="textTitle"> 新 闻 动态 </dt> 
<dd> 
<dt 
<dt> 
<hr /> 
</dt> 
<dd> 2616-2-16 
ub 
<li><a href= 
"javascript:void(null) ;”title=" 小 财神 竟 彩 投注 
站 彩票 高 速 打 票 系统 网 络 上 力 竟 彩 店 提供 充 美 职务 "> 小 叶 
神 席 彩 投 注 站 彩票 高 速 打 票 系统 网 络 版 为 竟 彩 店 提供 
充 美 服务 </a></Ui> 
<Li><a href= 
de title=" 小 财神 投注 站 彩 
高 速 打 票 系统 "> 小 财神 投注 站 彩票 高 速 打 票 系统 </a></ 


Ui> 





<Li><a href= 
"javascript:void(null) ;”title=" 网 吧 备 委 认 证 管 
理 系统 "> 网 取 备 索 认 证 管理 系统 </ay</1i> 
</ub> 
</dd> 
cd 
<hr /> 
/de> 
<dd> 2616-4-26 
< 
<Li><a href= 
"javascript:void(nutU) ;”title=" 我 公司 承担 的 国 
防 科 工 委 工 控 软件 项 目 " 我 公司 承担 的 国防 科 工 委 工 
控 软 件 项 目 </a></ti> 
<Li><a href= 
"javascript:void(null) ;”title=" 招 投标 文档 管理 
软件 "有 抽 近 文 接管 理 亲 统 软件 <Ja></11> 


图 20-31 





图 20-30 CSS 样式 代码 








线 标签 和 项 目 列表 . 并 输入 


<Uiy<a href= 
"javascript:void(null) ;”title=" 手 机 短信 防伪 系 
统 软件 "> 手机 短信 防伪 系统 软件 </a></Li> 
</ut 
</dd> 
<dt> 
<hr /> 
</dt> 
<dd> 2819-5-7 
<ut> 
<Li><a href= 
"javascript:void(null) ”titLe="2916 中 国 管理 模 
式 十 出 交道 选 理事 会 打造 ">2616 中 国 管理 模式 杰出 奖章 
圭 事 人 打造 </a></Li> 
<Uiy<a href= 
"javascript:void(null) ;”title=" 小 企业 之 家 -- 友 
商 网 新 战略 发 布 会 "> 小 企业 之 家 -- 友 商 网 新 战略 发 布 会 </a 
></Li> 
<Uiy<a href= 
"javascript: :void(nutl); " title=" 成 长 版 中 小 企 
于 升级 之 旅 "> 成 长 版 中 小 企业 升级 之 旅 </a></tiy 
</ub> 
</dd> 
</db 
</dd> 
</db> 
<div id="more"><a href= 
"javascript:void(null) ;”title=" 更 多 新 闻 ">+ 更 
多 新 闻 </a></div> 


CSS 样式 代码 


第 20 章 XHTML+CSS 








STEP| 们 在 main.css 文档 中 分 别 给 textTitle 类 . <hr> 标 签 . 定义 列表 . 项 目 列表 定义 样式 属性 , 如 图 20-32 
所 示 。 

STEP|18 按照 相同 的 方法 . 通过 在 ID 为 home2Right 的 div 容器 中 插入 定义 列表 、 水 平 线 标签 、 项 目 列 
表 、 插 入 图 像 及 输入 文本 .创建 “公司 简介 ”栏目 ， 如 图 20-33 所 示 。 


<dl> 
<dt class="textTitle"> 公 司 简介 </dt> 








</dt> 
<dd>sp 计算 机 软件 开发 有 限 公司 
<p>SD 计 算 机 软件 开发 有 限 公司 ， 从 事 

计算 机 软件 开发 、 电 子 出 版 物 设计 制作 、 国 际 互联 网 
网 站 设计 开发 、 信 息 发 布 等 计算 机 软件 技术 服务 。 高 
质量 和 高 效率 是 我 们 公司 的 特点 。 我 们 的 工作 精神 是 
+ 精进 求 精 、 合 作 、 发 展 。<br /> 

企业 精神 : 信 营 、 信 任 、 信 心 。<br /> 

信 答 : 公司 对 客户 有 信誉; 公司 对 员 
工 有 信 敬 ; 员工 对 公司 有 信誉 <br /> 

信任 : 公司 对 客户 信任 ; 公司 对 员工 
信任 ; 员工 对 公司 信任 ; <br /> 

信心 : 公司 对 客户 有 信心 ; 公司 对 员 


#home2 #home2Left dl { 工 有 信心 ; 员工 对 公司 有 信心 } </p> 


height:326px; </dd> 
margin:Opx; <dt> 
} <hr /> 
#home2 .textTitle { </dt> 
display:block; <dd> 
width:120px; <ul id="ListLeft"> 
font-size:16px; <Li><img src= 
font-weight:bold; "../images/ul_Ui.png" width="14" height="14" / 
Line-height:36pxj ><a href="javascript>;"” titLe=""></a> 订 购 第 一 
} 步 :查看 产品 </Li> 
#home2 #home2Left dl dd { <Li><img src= 
width: 246px; "../images/ul_Ui.png" width="14" height="14" / 
margin: Opx; ><a href="javascript>;”title=""></a>i] 购 第 二 
height:296px; 步 :进入 网 上 i 购 栏目 </i> 
} <Li><img src= 
#home2 #home2Left dl dd dl dd { "../images/ul_Ui.png" width="14" height="14" / 
height:8epx; ><a href="javascript>;"” title=""></a> 订购 第 二 
} 步 :填写 订购 信息 </1i> 
#home2 #home2Left dl dd dl dd ul { </ub> 
sl Hy <ul id="ListRight"> 
padding: Opx; 


<Li><img src= 
"../images/ul_Ui.png" width="14" height="14" / 


} ><a href="javascript>;" = i 四 
= pt>;”title=""></a>i] 购 第 四 
#home2 #home2Left dl dd dl dd ul lia{ 步 : 订购 提交 </ti> 


color: s#adadadi 
text-decoration: none; 


Uist-style-type: nonej 


<Liy<img src= 





} "../images/ul_Ui.png" width="14" height="14" / 
#home2 #home2Left dl dd dl dt h ><strong></strong><a href="javascript>;" title 

pn =m"></a9i] 购 第 五 步 : 我 们 与 你 联系 </t1> 

width:256px; <Li><img sr 

height:1px3 "../images/ul_Ui.png" width="14" height="14" / 
} ><a href="javascript>;”title=""></a> 订购 第 六 
#home2 #home2Left more { 步 : 交易 成 功 </ti> 

margin-top:19px3 </ub> 

margin-bottom:55px; </dd> 

height:36px3 </d> 

Line-height:36px; </dd> 
} </db> 

图 20-32 CSS 样式 代码 图 20-33 CSS 样式 代码 


STEP|19 在 main.css 文档 中 分 别 给 名 称 为 textTitle 的 类 、ID 为 listLeft 和 listRight 的 元 素 、<hr> 标 签 和 
了 P 了 标签、 定义 列表 、 项 目 列表 等 定义 样式 属性 . 如 图 20-34 所 示 。 
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STEP|20 在 ID 为 footer 的 
对 齐 方式 等 样式 属性 ， 如 图 20-35 所 示 。 





float:none; 





} 

#home2 #home2Right dl dt { 
float:none; 
font-size: 16px; 
font-weight: bold; 





margin:6j 
paddi 了 
display: block; 

本 

#home2 #home2Rright dl dt hr { 
width:436px; 
height:1px; 
color:#eaeaea; 

} 

#home2 #home2Rright dl dd { 
margin:0; 
padding:0; 
height: 80px; 

#home2 #home2Rright dl dd dl { 
margin:0; 
padding:6; 
height: 89px; 

} 


#home2 #home2Right dl dd dl dd { 
padding:©; 
margin:Opx; 

















#listleft { 
display:block; 
margin: 10px 0; 
padding: px; 
Uist-style-type: none; 
float:left; 
width:180px; 

} 

#listRight { 
display:block; 
margin:10px Spx; 
padding: epx; 
List-style-type: none; 
float:left; 
width:180px; 

} 

#home2 #home2Right dl dd dl dd p { 
Line-height: 25px; 

} 

#home2 #home2Right dl dd dl dd ul li { 
display:block; 
margin:0; 
padding:0; 
Line-height:25px; 
height:25px; 
width:180px; 
color: #8d8dad; 


图 20-34 CSS 样式 代码 


div 容器 中 输入 文本 ， 并 在 main.css 文档 中 定义 背景 图 像 、 宽 度 、 








#footer { 


padding:16px Opx; 
margin:9 auto; 
background-image: 


url(../images/hfooter_e5.png); 


background-repeat:no-repeat; 
width: 869px; 
text-align:right; 

Color:#FFF; 
font-family: "微软 雅 黑 "，" 宋 体 "; 


图 20-35 CSS 样式 代码 


JavaScript 是 一 种 直译 式 脚本 语言 ， 它 的 解释 器 被 称 为 JavaScript 引擎 ， 是 浏览 器 的 一 部 分 ,广泛 用 
于 客户 端的 脚本 语言 ， 最早 是 在 HIML 网 页 上 使 用 ,用 来 给 HIML 网 页 增加 动态 功能 。 随 着 国内 房地产 
业 的 兴起 和 互联 网 技术 的 发 展 ， 为 推广 房产 公司 及 建筑 群 的 特点 并 促进 房屋 销售 ， 房 地 产 类 网 站 逐渐 兴 
旺 起 来 。 由 于 房地产 行业 的 特殊 性 ， 这 类 网 站 在 设计 上 非常 极端 化 ， 例 如 有 些 房产 网 站 完全 依靠 大 量 的 
信息 来 吸引 访问 者 ， 并 不 太 重 视 网 站 平面 设计 效果 ; 而 有 些 房产 网 站 则 非常 注重 平面 效果 ， 用 华丽 的 产 
品 动画 展示 来 吸引 购房 者 。 

本 章 将 详细 介绍 JavaScript 在 房产 网 站 中 的 应 用 ,主要 内 容 有 房地产 网 站 分 类 、 房 地 产 网 站 的 设计 要 
点 、 不 动产 网 站 的 设计 风格 、JavaScript 概述 、 运 算 符 和 表达 式 、 控 制 语句 、 内 置 函 数 和 综合 实战 。 通 过 
本 章 的 学 习 我 们 可 以 知道 怎样 在 网 站 中 应 用 JavaScript。 
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页 设计 与 网 站 建设 自学 经 典 : 


网 与 网 站 建设 自学 经 典 








房地产 网 站 分 类 








房地产 类 网 站 是 目前 具有 代表 性 的 一 类 网 站 .其 页 面 结构 通常 较为 简单 ， 但 在 版 面 设计 上 追求 较 高 
的 艺术 性 和 创造 性 ， 以 突出 产品 的 风格 与 特性 。 本 节 主 要 讲述 房地产 网 站 分 类 . 内容 主 要 包括 不 动产 网 
站 、 房 产 企业 网 站 、 综 合 房产 信息 网 站 和 房产 中 介 网 站 。 用 户 通过 本 节 的 学 习 可 以 了 解 房 地 产 网 站 分 类 . 
为 后 面 的 网 站 建设 奠定 基础 。 


21.1.1 不 动产 网 站 


不 动产 是 一 个 法 律 名 词 ， 其 含义 是 土地 及 其 上 的 房屋 等 不 可 移动 的 建筑 物 等 。 不 动产 网 站 通常 是 
建设 者 或 经 营 者 为 推销 和 宣传 而 建设 的 网 站 。 这 类 网 站 非常 重视 其 独特 性 与 艺术 性 .大量 地 使 用 各 种 及 
目的 特效 ， 不 计 成 本 地 追求 美观 。 

0 图 21-1 所 示 的 网 站 是 一 个 水 景 购物 城 ， 网 站 突出 了 水 景 的 特点 ,使 用 由 水 波纹 组 成 的 背景 ,设计 
十 分 大 胆 。 网 站 的 Banner 使 用 Flash 来 制作 ,运用 了 多 种 图 像 切换 效果 。 
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图 21-1 水 景 购 物 城 网 站 


有 些 不 动产 网 站 为 追求 网 站 的 动感 效果 ， 完 全 使 用 Flash 来 设计 网 站 。 用 Flash 设计 网 站 的 优点 是 布 
局 非常 自由 ,不 受 HTML 代码 、 字 体 和 图 像 格式 等 的 限制 ， 可 以 为 网 站 添加 更 多 特效 。 
0 图 21-2 所 示 的 不 动产 网 站 完全 由 Flash 制作 而 成 ， 因 此 设计 版 式 非常 自由 。 例 如 ， 网 站 的 导航 条 
放置 在 网 页 的 底部 ， 而 导航 条 的 子 菜单 从 其 上 方 弹出 。 


21.1.2 ”房产 企业 网 站 


房产 企业 是 以 房产 建设 、 销 售 、 咨 询 和 管理 为 主 的 企业 。 这 类 企业 的 网 站 十 分 注重 品牌 形象 的 宣传 . 
设计 追求 简洁 大 气 。 根 据 房产 企业 的 经 营 范围 ， 又 可 以 将 其 分 为 如 下 几 类 。 
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图 21-2 用 Flash 设计 的 网 站 








1. 房产 建设 与 开发 
这 类 企业 以 房产 建设 、 开 发 ， 并 销售 其 开发 的 房产 为 主 业 ， 设 计 往往 中 规 中 矩 ， 和 大 多 数 企业 的 网 


站 相 比 区 别 不 大 。 
如 图 21-3 所 示 的 房产 企业 中 海地 产 网 站 以 红色 和 蓝 色 作为 网 页 的 主 色调 ,配合 大 幅 的 留 白 , 给 人 一 


种 严肃 、 认 真 的 感觉 。 蓝 色 作为 后 退色 ， 在 地 产 类 网 站 中 可 以 使 图 像 更 加 深邃 、 高 远 。 
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PP rN 
图 21-3 中 海地 产 网 站 
2. 建筑 设计 企业 
这 类 企业 通常 为 房产 开发 企业 提供 先期 的 房产 设计 ， 以 及 城市 规划 等 业务 。 由 于 这 类 企业 以 设计 的 
艺术 效果 为 企业 宣传 的 核心 ， 因 此 其 网 站 往往 独 具 一 格 ， 追求 时 尚 与 艺术 效果 。 


给 人 以 非常 强烈 的 视觉 冲击 感 . 黑 、 白 、 红 、 灰 四 色 的 搭配 使 网 页 各 栏目 错落 有 致 。 
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图 21-4 建筑 设计 企业 网 站 


3. 房产 投资 咨询 企业 

房产 投资 咨询 企业 和 建筑 设计 企业 一 样 ， 都 是 为 房产 建筑 开发 企业 服务 的 房产 相关 企业 。 这 类 企业 
以 提供 创意 为 主要 服务 项 目 ， 因 此 其 网 站 设计 往往 也 十 分 有 创意 。 
图 21-5 所 示 的 网 站 主要 提供 的 是 不 动产 的 投资 与 管理 服务 ， 网 站 的 主题 部 分 设计 非常 有 特色 ， 以 
半 透 明 的 Banner 配合 街景 照片 ， 显 得 错落 有 致 。 
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图 21-5 房产 投资 咨询 企业 网 站 


21.1.3 ”综合 房产 信息 网 站 


房产 消费 是 一 种 高 介入 度 的 消费 模式 .因此 消费 者 必须 掌握 大 量 的 信息 。 提 供 大 量 的 房产 交易 信息 
的 网 站 就 是 综合 房产 信息 网 站 ,这 类 网 站 提供 的 信息 十 分 丰富 .因此 版 面 设计 通常 十 分 紧凑 。 

如 图 21-6 所 示 的 网 站 是 典型 的 综合 房产 信息 网 站 。 在 设计 这 类 网 站 时 ,杂乱无章 的 广告 往往 会 使 网 
站 的 可 浏览 性 大 打折 扣 。 因 此 .除了 合理 安排 栏目 内 容 外 还 需要 合理 地 安排 广告 位 .例如 多 使 用 图 像 切 
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章 ”JavaScript 
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图 21-6 综合 房产 信息 网 站 


21.1.4 ”房产 中 介 网 站 


房地产 价格 的 不 断 攀升 ， 导 致 很 多 人 需要 租房 或 购买 二 手 房 ， 房 产 中 介 网 站 随 之 孕育 而 生 。 这 类 网 
站 通常 有 非常 强 的 地 方 特色 ， 以 某 一 城市 的 房产 中 介 为 主 ， 以 大 量 的 供求 信息 来 吸引 访问 者 。 由 于 其 信 
息 量 相对 综合 房产 信息 网 站 要 大 得 多 ， 又 十 分 琐碎 ,因此 对 页 面 的 排版 布局 并 不 太 重视 。 

在 房地产 中 介 网 站 中 .版 面 布 局 比较 随意 .大 量 的 信息 充斥 其 中 ， 完 全 以 方便 交易 双方 查找 信息 为 
网 站 设计 的 侧重 点 。 设 计 房产 网 站 并 没有 什么 绝对 规范 .只 要 符合 网 站 用 户 需 要 的 设计 ， 就 是 合理 的 
设计 。 


y4 妈 局 房地产 网 站 的 设计 要 点 


房地产 类 网 站 的 目的 就 是 推广 和 营销 企业 所 经 营 的 产品 。 使 用 网 站 展示 和 推广 企业 产品 ， 可 以 拓展 
产品 的 浏览 人 群 ， 降 低产 品 浏览 者 浏览 产品 的 成 本 。 通 过 使 用 图 像 处 理 技术 对 产品 的 形象 进行 艺术 化 处 
理 , 也 可 以 刺激 浏览 者 的 购买 欲望 。 本 节 主要 讲述 房地产 网 站 的 设计 要 点 ,主要 内 容 包 括 房地产 网 站 设 
计 的 个 性 化 、 互 动 性 、 实 用 性 、 技 术 性 和 延展 性 。 用 户 通过 本 节 的 学 习 可 以 了 解 房 地 产 网 站 都 有 哪些 设 
计 要 点 ， 为 后 面 的 网 站 建设 商定 基础 。 


21.2:1 个 性 化 
网 站 的 设计 要 有 自己 的 特色 .而 非 千 篇 一 律 的 抄袭 。 有 自己 的 特色 才能 在 浏览 者 心目 中 留 下 印象 。 
由 于 房地产 业 的 特殊 性 ， 竞 争 非常 激烈 ， 设 计 一 个 个 性 化 的 房地产 网 站 ， 有 助 于 树立 企业 形象 、 吸 引 购 


房 者 和 投资 者 。 
通常 网 站 项 部 导航 菜单 都 是 向 下 弹出 的 ， 而 该 网 站 的 顶部 导航 菜单 却 反 其 道 而 行 之 ， 向 上 弹出 。 其 
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网 页 设计 与 网 站 建设 自学 经 典 


网 站 的 配色 和 左 侧 导 航 栏 的 Flash 效果 也 设计 得 非常 有 个 性 ， 网 站 的 Banner 给 人 一 种 烟雨 腾 上 晓 的 感觉 
富有 诗意 ， 如 图 21-7 所 示 。 
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图 21-7 网 站 设计 的 个 性 化 


21.2.2 互动 性 


互联 网 与 传统 媒体 相 比 ， 其 最 大 的 特点 就 是 互动 性 。 在 互联 网 上 发 布 的 产品 信息 可 以 及 时 获取 浏览 
者 的 意见 和 建议 , 这 些 信息 的 反馈 可 以 使 房地产 企业 及 时 改进 规划 或 营销 策略 . 紧 跟 用 户 需求 . 如 图 21-8 
所 示 。 
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图 21-8 网 站 设计 的 互动 性 


21.2.3 ”实用 性 


实用 性 往往 是 网 站 的 核心 部 分 。 建 立 网 站 的 目的 即 最 大 限度 地 对 房地产 项 目 本 身 以 及 房产 开发 商 的 
企业 形象 进行 宣传 ， 以 服务 已 购房 者 和 未 来 潜在 的 购房 者 。 脱 离 了 网 站 的 实用 性 ， 建 立 网 站 就 没有 任何 
意义 。 在 拓展 网 站 实用 性 时 .可 大 量 展示 房地产 项 目 中 的 户型 信息 、 地 理 位 置 、 物 业 管 理 等 优势 ， 如 图 
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21-9 所 示 。 
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图 21-9 网 站 设计 的 实用 性 
21.2.4 技术 性 


技术 是 网 站 建设 实施 的 手段 先进 的 技术 能 够 保证 将 所 要 传达 的 信息 完美 地 表现 出 来 。 ee 


术 可 实现 强大 的 网 站 功能 ,展示 网 站 的 个 性 . 与 浏览 者 互动 交流 信息 ,实现 企业 资源 与 网 络 的 整合 。 
房产 网 站 设计 中 ， 可 大 量 使 用 Flash 动画 等 技术 ， 如 图 21-10 所 示 。 
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图 21-10 网 站 设计 的 技术 性 


21.2.5 延展 性 


互联 网 本 身 是 不 断 发 展 的 .技术 和 信息 也 在 不 断 地 进步 。 因 
应 未 来 发 展 的 空间 ， 例 如 可 以 使 用 CSS 进行 单行 双 列 布局 ， 添 力 











此 . 在 设计 房产 类 网 站 时 ， 要 预 留 能 适 
版 块 不 会 影响 网 页 整体 布局 效果 。 
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网 页 设计 与 网 站 建设 自学 经 典 : 


网 页 设计 与 网 站 建设 自学 经 典 











不 动产 网 站 的 设计 风格 





房地产 网 站 .尤其 是 以 房产 销售 为 目的 的 房地产 产品 、 房 地 产 企业 等 网 站 ， 通 常 很 注重 美术 设计 和 
色彩 的 搭配 。 合 理 的 色彩 搭配 可 以 将 网 站 衬托 得 高 贵 典雅 、 磅 太 大 气 。 本 节 将 举 一 些 房地产 网 站 的 实例 . 


21.3.1 棕色 主 色调 


棕色 本 身 的 含义 十 分 丰富 ,例如 可 以 表现 咖啡 、 巧 克 力 等 美食 ， 也 可 以 表现 树木 、 木 材 等 生态 化 产 
品 。 用 棕色 为 主 色调 .辅助 以 绿色 .可 以 使 人 回归 大 自然 ,感受 森林 的 美丽 。 
如 图 21-11 所 示 的 网 站 在 设计 上 以 棕色 为 主 色调 , 点 缀 以 绿色 边缘 . 使 人 感觉 仿佛 进入 到 了 丛林 小 屋 
中 ， 犹 如 身 临 其 境 一 般 ， 非 常 有 特色 。 
ET ET "NR TO 
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图 21-11 以 棕色 为 主 色调 的 网 站 


21.3.2 ”绿色 主 色调 


大 部 分 的 清新 自然 型 网 站 都 喜欢 用 绿色 作为 网 站 的 主 色调 .绿色 是 最 能 体现 出 自然 、 和 谐 与 健康 的 
颜色 。 

如 图 21-12 所 示 的 网 站 以 绿色 为 主 色调 . 配合 蓝 色 和 青色 来 表示 水 和 天 空 , 色彩 运用 非常 有 特点 . 构 
图 也 非常 和 谐 ， 是 典型 的 追求 清新 自然 感 的 网 站 。 
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图 21-12 以 绿色 为 主 色 调 的 网 站 


21.3.3 天蓝 色 主 色调 


天 蓝 色 代 表 天 空 ， 代 表 大 海 。 以 天 蓝 色 为 主 色调 的 不 动产 网 站 也 可 以 给 人 以 自然 和 谐 的 感觉 ， 以 及 





与 天 空 和 大 海 融 为 一 体 的 视觉 效果 。 


如 图 21-13 所 示 的 房产 网 站 以 渐变 的 天 蓝 色 为 主 色调 ,配合 视频 中 的 天 空 背景 . 








给 人 以 清新 、 自 然 、 














图 21-13 以 天 蓝 色 为 主 色调 的 网 站 


21.3.4 灰色 主 色调 








灰色 属于 白 和 黑 的 混合 色 . 自身 毫 无 特点 ， 是 一 个 彻底 的 被 动 色彩 . 完全 依靠 邻近 色彩 来 获得 个 性 。 





























正 由 于 灰色 既 不 抑制 也 不 强调 的 特点 .给 视觉 带 来 习 





F 稳 感 。 灰 














色 的 主 f 


色调 可 以 和 任何 加 


助 颜色 措 配 ， 例 
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如 与 红色 搭配 显得 活泼 、 与 黑色 措 配 显 得 稳重 、 与 绿色 搭配 显得 健康 
如 图 21-14 所 示 的 不 动产 网 站 以 灰色 为 主 色调 . 配合 以 天 蓝 色 描绘 的 广阔 天 


感觉 


时 


页 设计 与 网 站 建设 自学 经 典 : 





、 与 蓝 色 搭配 显得 大 气 。 
空 ， 给 人 以 磅 磅 大 气 的 





ee 


21.3.5 深蓝 色 主 色调 


深蓝 色 代表 深 之 、 理 性 ,是 一 
可 以 给 人 以 大 气 的 感觉 。 





en 
了 A 
三 粤 祖 酒 





各 向 天 草 时 Pp 各 


如 图 21-15 所 示 的 网 站 以 深蓝 色 为 主 色调 的 山水 作为 背 


图 像 的 空间 感 ， 使 网 站 显得 更 加 大 气 。 








一 了 5 

- ~ 

EET 
二 


[Es 


图 21-14 以 灰色 为 主 色 调 的 网 站 


种 消极 的 、 收 缩 的 、 内 在 的 色彩 。 使 用 深蓝 色 作 为 网 页 的 主 色调 . 也 


景 。 深蓝 色 作 为 后 退色 , 可 以 有 效 地 增加 背景 


acrer 
本 村 林 济 ， 贡 卫 成 


图 21-15 以 深蓝 色 为 主 色 调 的 网 站 





JavaScript 





21.3.6 金黄 色 主 色调 


金黄 色 是 一 种 高 明度 色 ， 具 有 快乐 、 高 贵 、 华 美 、 光 明 等 特性 的 颜色 。 金 黄色 主 色调 的 网 站 可 以 给 
用 户 以 辉煌 、 兴 奋 的 感觉 ， 刺 激 用 户 的 占有 和 欲 ， 如 图 21-16 所 示 。 
0 图 21-16 所 示 的 网 站 即 是 以 金黄 色 为 主 色调 . 辅助 以 对 比 感 非常 强烈 的 黑色 。 在 网 页 设计 中 , 其 使 
用 了 非常 具有 特色 的 深蓝 与 金黄 相间 的 盆 绘 图 像 . 又 给 网 页 带 来 古典 主义 的 色彩 。 
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图 21-16 以 金黄 色 为 主 色调 的 网 站 


21.3.7 ”紫色 主 色调 


在 所 有 可 见 光谱 中 ,紫色 的 光波 是 最 短 的 ， 色 相 也 最 暗 。 由 于 其 在 视觉 上 知觉 度 很 低 ， 因 此 以 紫色 
作为 主 色调 的 网 站 可 以 表现 出 一 种 神秘 感 ， 孤独 、 高 傲 而 优雅 的 感觉 。 紫 色 的 网 站 表现 的 手法 与 金黄 色 
的 网 站 完全 相反 ， 如果 说 金黄 色调 的 高 雅 华丽 是 开放 型 的 ， 那 么 紫色 的 高 雅 华丽 就 是 孤独 型 的 。 
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JavaScript 是 一 种 基于 对 象 (Object) 和 事件 驱动 (Event Driven) 并 具有 安全 性 能 的 脚本 语言 。 本 节 
主要 讲述 两 个 方面 的 内 容 , 即 数据 类 型 和 变量 与 常量 。 用 户 可 以 将 JavaScript 嵌入 到 普通 的 XHTML 网 页 
里 并 由 浏览 器 执行 ,从 而 可 以 实现 动态 实时 的 效果 。JavaScript 虽然 包含 了 单词 Java. 但 是 它 与 Java 语言 
是 完全 不 同 的 两 类 语言 ，JavaScript 仅 用 于 网 页 脚本 . 它 属于 脚本 语言 ,而 Java 则 是 一 种 纯 面向 对 象 的 编 
程 语言 。 


21.4.1 什么 是 JavaScript 


























JavaScript 是 一 种 脚本 编程 语言 ， 它 简单 易学 . 能 为 网 页 添加 各 种 丰富 的 动态 效果 。 它 被 浏览 器 解释 
执行 . 不 需要 对 程序 进行 编译 ， 因 此 编写 起 来 比较 轻松 .只 需要 使 用 一 个 记事 本 . 就 可 以 编写 JavaScript 
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网 页 设计 与 网 站 建设 自学 经 典 





代码 ， 相 较 于 Java 这 类 系统 程序 语言 必须 安装 编译 器 来 说 ， 它 非常 轻 量化 。 

在 网 页 中 使 用 JavaScript 非常 简单 ， 可 以 直接 在 HTML 中 赃 入 JavaScript。 不 过 出 于 内 容 与 代码 分 离 
的 目的 , 一般 会 将 JavaScript 写 在 单独 的 以 js 结尾 的 文件 中 , 然后 在 HIML 中 应 用 该 网 页 。 使 用 JavaScript 
可 以 直接 操作 HTML 页 面 中 的 各 个 元 素 . 这 样 就 可 以 动态 地 更 改元 素 的 属性 . 实现 一 些 基本 的 动画 效果 。 
21.4.2 ”数据 类 型 

作为 一 种 脚本 语言 , JavaScript 有 其 自己 的 语法 结构 。JavaScript 允许 使 用 三 种 基础 的 数据 类 型 , 分 别 
是 整 型 、 字 符 串 和 布尔 值 。 此 外 ， 还 支持 两 种 复合 的 数据 类 型 一 一 对 象 和 数组 ， 它 们 都 是 基础 数据 类 型 
的 集合 。 作 为 一 种 通用 数据 类 型 的 对 象 ， 在 JavaScript 中 也 支持 函数 和 数组 .它们 都 是 特殊 的 对 象 类 型 。 
另外 , JavaScript 还 为 特殊 的 目的 定义 了 其 他 特殊 的 对 象 类 型 。 例如 . Date 对 象 表示 的 是 日 期 和 时 间 类 型 。 
JavaScript 的 这 6 种 数据 类 型 如 表 21-1 所 示 。 

表 21-1 JavaScript 的 6 种 数据 类 型 

















数据 类 型 


123,-0.129871,071,0X1fa 
'Hello','get the &','b(@911.com’ 


Date, Window,Document 





tmp,demo,today,gettime 
21.4.3 ”变量 与 常量 


变量 是 一 个 存储 信息 的 容器 ， 用 户 可 将 任意 类 型 的 数据 放 在 变量 中 。 
在 使 用 变量 前 ， 可 先 使 用 var 关键 字 声 明 变量 .创建 一 个 容器 : 





Var a7 


Var textAreaName; 
在 声明 变量 后 ， 用 户 可 通过 赋值 语句 直接 为 变量 赋值 : 


a=57 
textAreaName="JavaScript 脚本 代码 "7 


在 JavaScript 中 ， 每 行 语句 需要 通过 分 号 “;” 隔 开 。JavaScript 的 变量 分 为 三 种 类 型 ， 即 数字 、 逻 辑 
值 和 字符 串 。 

在 书写 数字 时 ， 可 直接 将 数字 输入 到 网 页 文档 中 。 在 书写 逻辑 值 时 ， 同 样 可 以 直接 将 数字 输入 到 网 
页 文档 中 。 逻 辑 型 数据 的 值 只 有 两 种 ， 即 tue 和 false。 在 书写 字符 串 时 ， 需 要 在 字符 串 的 两 端 加 上 单 引 
号 “” 或 双 引 号 “"。 

JavaScript 允许 用 户 向 未 声明 的 变量 直接 赋值 。 在 赋值 过 程 中 ，JavaScript 会 自动 声明 变量 : 














action="progress"; 


newValue=110; 


在 编写 JavaScript 代码 时 ， 用户 可 以 重新 声明 已 赋值 的 变量 .此 时 .该 变量 的 值 将 为 空 。 例 如 : 








JavaScript 





Var newData="this is a Variable"; 


Var newData; 


常量 通常 又 称 字面 常量 ， 常量 中 的 数据 不 能 改变 。JavaScript 使 用 关键 字 const 声明 一 个 常量 , 例如 : 





Const PI =3.14; 

















常量 可 以 是 任何 类 型 的 值 ， 因 为 不 能 声明 之 后 对 它 进行 赋值 ， 因 此 .在 定义 它 时 ,就 应 使 用 它 的 常 
量 值 来 对 其 进行 初始 化 。JavaScript 中 还 包含 一 些 特 殊 字符 . 这 些 字符 通常 不 会 显示 . 而 是 进行 某 些 控制 ， 
因此 也 称 为 控制 字符 。 如 表 21-2 所 示 列 出 转 义 字符 的 字符 串 常 量 。 


表 21-2 转 义 字符 的 字符 串 常量 

















转 义 字符 意义 
vb 退 格 (Backspace) 
¥ 换 页 (Form Feed) 
un 换行 (New Line) 


Yr 返回 (Carriage Return) 
At 制 表 符 (Tab) 

单 引号 (") 
双 引 号 (") 
\ 反 斜 线 (\) 





/有 是 运算 符 和 表达 式 


在 JavaScript 的 程序 中 要 完成 某 些 功能 . 离 不 开 各 种 各 样 的 运算 符 。 运 算 符 用 于 将 一 个 或 者 几 个 值 变 
成 结果 值 ， 使 用 运算 符 的 值 称 为 操作 数 ， 运 算 符 及 操作 数 的 组 合 称 为 表达 式 。 例 如 表达 式 : i=j/100 ;在 
这 个 表达 式 中 i 和 j 是 两 个 变量 ，/ 是 运算 符 , 用 于 将 两 个 操作 数 执行 除 运算 , 100 是 一 个 数值 。JavaScript 
支持 很 多 种 运算 符 ， 包 括 用 于 字符 串 与 数字 类 型 的 “+” 和 “= ”赋值 运算 符 ， 可 分 为 如 下 几 类 ， 下 面 将 
依次 进行 介绍 。 


21.5.1 算术 运算 符 
算术 运算 符 是 最 简单 、 最 常用 的 运算 符 ， 可 以 进行 通用 的 数学 计算 ， 如 表 21-3 所 示 是 算术 运算 符 。 


表 21-3 算术 运算 符 
形 式 























返回 Xx 加 y 的 值 
返回 X 减 y 的 值 
返回 x 来 以 y 的 什 
返回 xX 除 以 y 的 什 
返回 X 与 了 的 模 (X 除 以 了 的 余数 ) 
数值 递增 、 递 增 并 运 回 数值 
数值 递减 、 递 减 并 运 回 数值 
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. 
ee 
人 日 


经 典 


21.5.2 ”逻辑 运算 符 
逻辑 运算 符 通常 用 于 执行 布尔 运算 ， 常 和 比较 运算 符 一 起 使 用 来 表示 复杂 的 比较 运算 ， 这 些 运算 涉 














及 的 变量 通常 不 止 一 个 . 而 且 常 用 于 站、 while 和 for 语句 中 。 如 表 21-4 所 示 是 JavaScript 支持 的 逻辑 运算 符 。 
表 21-4 逻辑 运算 符 











当 两 表达 式 结果 为 真 时 ， 远 辑 与 运算 结果 也 为 真 
当 两 表达 式 中 任意 一 表达 式 结果 为 真 ， 逻 辑 或 运算 结果 即 为 真 

当 表 达 式 结果 为 真 时 ， 返 回 假 ， 反 之 则 返回 真 

先 为 两 表达 式 进行 远 辑 与 运算 ， 再 将 获取 的 结果 赋 子 运算 符 左 侧 的 表达 式 
先 为 两 表达 式 进行 远 辑 或 运算 ， 再 将 获取 的 结果 赋予 运算 符 左 侧 的 表达 式 











21.5.3 ”比较 运算 符 


比较 运算 符 用 于 对 运算 符 的 两 个 表达 式 进行 比较 , 然后 返回 boolean 类 型 的 值 , 例如 比较 两 个 值 是 否 
相同 或 者 比较 数字 值 的 大 小 等 ， 如 表 21-5 所 示 是 JavaScript 支持 的 比较 运算 符 。 














表 21-5 “比较 运算 符 
运 算 符 形 式 ES 
三 证 两 个 表达 式 的 值 是 否 相等 
> 证 运算 符 左 侧 的 表达 式 是 否 大 于 右 侧 的 表达 式 


验 
所 验 
码 验证 运算 符 左 侧 的 表达 式 是 否 大 于 或 等 于 右 侧 的 表达 式 
二 其 作用 与 相等 运算 符 正好 相反 ， 返 回 值 也 相反 
< 验 
验 
< 在 
与 


运 
于 证 运算 符 左 侧 的 表达 式 是 否 小 于 或 等 于 右 侧 的 运算 符 


= 一 不 进行 数据 转换 的 情况 下 验证 两 个 表达 式 是 否 完全 相等 
三 5 全 等 运算 符 相 反 ， 其 作用 与 全 等 运算 符 正好 相反 ， 返 回 值 也 相反 


21.5.4 字符 串 运算 符 


JavaScript 支持 使 用 字符 串 运算 符 “+” 对 两 个 或 者 多 个 字符 串 进行 连接 操作 ， 这 个 运算 符 的 使 用 比 
较 简单 ， 下 面 给 出 几 个 应 用 的 示例 : 


攻 证 运算 符 左 侧 的 表达 式 是 否 小 于 右 侧 的 表达 式 


Var strl="Hello"; 
Var str2="World"; 
Var str3="Love"; 


Var Resultl=strl+str2 ; // 结 果 为 "HelloWorld" 
var Result2=strl+" "+str2 ; // 结 果 为 "Hello World" 
var Result3=str3+" in "+str2 ;  // 结 果 为 "Love in World" 


Var sqlstr="Select * from [user] where username='"+"ZHT"+""'" 
// 结 果 为 Select * from [user] where username='ZHT' 
Va =" aT ANC 的 站 时 为 %52 


.5.5 ”位 操作 运算 符 
位 操作 运算 符 对 数值 的 位 进行 操作 .如 向 左 或 者 向 右 移 位 等 ， 如 表 21-6 所 示 是 JavaScript 支持 的 位 
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m= 





::::: 第 21 章 ， JavaScript 








操作 运算 符 。 


表 21-6 位 操作 运算 符 
















表达 式 1& 表达 式 2 
表达 式 1| 表达 式 2 
表达 式 1^ 表达 式 2 
表达 式 1<< 表达 式 2 
>> | 表达 式 1>> 表达 式 2 
>>> | 表达 式 1>>> 表达 式 2 
~ 表达 式 


当 两 个 表达 式 的 值 都 为 true 时 返回 1， 否则 返回 0 
当 两 个 表达 式 的 值 都 为 false 时 返回 0， 否 则 返回 1 
两 个 表达 式 中 有 且 只 有 一 个 为 false 时 返回 0， 否 则 为 1 
将 表达 式 1 向 左 移动 表达 式 2 指定 的 位 数 

将 表达 式 1 向 右 移动 表达 式 2 指定 的 位 数 

将 表达 式 1 向 右 移动 表达 式 2 指定 的 位 数 ， 空 位 补 0 
将 表达 式 的 值 按 二 进 制 逐 位 取 反 





























21.5.6 ”赋值 运算 符 


赋值 运算 符 用 于 更 新 变量 的 值 ，。 有 些 赋 值 运 算 符 可 以 和 其 他 运算 符 组 合 使 用 ， 对 变量 中 包含 的 值 进 
行 计 算 ， 然 后 用 新 值 更 新 变量 ， 如 表 21-7 所 示 是 赋值 运算 符 。 


表 21-7 ”赋值 运算 符 
算 符 形 式 含义 
变量 = 表达 式 将 表达 式 的 值 赋 予 变 量 
变量 += 表 达 式 将 表达 式 的 值 与 变量 值 执行 + 操作 后 赋予 变 量 
变量 一 表达 式 将 表达 式 的 值 与 变量 值 执行 一 操作 后 赋予 变 别 
变量 *= 表 达 式 将 表达 式 的 值 与 变量 值 执行 * 操作 后 赋予 变 晶 
变量 /= 表达 式 将 表达 式 的 值 与 变 晶 值 执 行 / 操作 后 赋予 变量 
变量 %= 表 达 式 将 表达 式 的 值 与 变量 值 执行 % 操作 后 赋 子 变量 
变量 <<= 表 达 式 对 变量 按 表 达 式 的 值 向 左 移 
变量 >>= 表 达 式 对 变量 按 表 达 式 的 值 向 右 移 
变量 >>>= 表 达 式 对 变量 按 表 达 式 的 值 向 右 移 ， 空 位 补 0 
变量 &= 表 达 式 将 表达 式 的 值 与 变量 值 执 行 & 操作 后 赋予 变量 
变量 三 表达 式 将 表达 式 的 值 与 变量 值 执行 | 操作 后 赋予 变量 
变量 ^= 表 达 式 将 表达 式 的 值 与 变量 值 执行 ^ 操作 后 赋予 变量 


21.5.7 “条件 运算 符 


JavaScript 支持 Java、C 和 C++ 中 的 条 件 表 达 式 运算 符 “? ， 这 个 运算 符 是 个 二 元 运算 符 ， 它 有 三 个 
部 分 ， 一 个 计算 值 的 条 件 和 两 个 根据 条 件 返回 的 真 假 值 。 格 式 如 下 所 示 : 


条 件 ? 值 ] : 值 2 


























如 果 条 件 为 真 ， 则 表达 值 使 用 值 1， 否 则 使 用 值 2。 例 如 : 


(Wav 


如 果 x 的 值 大 于 y 值 ， 则 表达 式 的 值 为 30: 否则 x 的 值 小 于 或 者 等 于 y 值 时 ,表达 式 值 为 31。 
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控制 语句 





与 多 数 高 级 编程 语言 类 似 ，JavaScript 也 可 以 通过 语句 控制 代码 执行 的 流程 。 本 节 主 要 讲述 两 个 方面 
的 内 容 ， 将 JavaScript 的 语句 分 为 两 大 类 ， 即 条 件 语句 和 循环 语句 。 用 户 可 以 将 JavaScript 嵌入 到 普通 的 
XHTML 网 页 里 并 由 浏览 器 执行 ， 从 而 可 以 实现 动态 实时 的 效果 。 


21.6.1 条 件 语句 


条 件 语句 的 作用 是 对 事件 行为 或 表达 式 的 值 进行 判断 ， 根 据 判 断 的 结果 ， 执行 某 一 段 语 句 。 
在 JavaScript 中 ， 主 要 的 条 件 语句 共 包 括 4 种。 

(1) 壕 … 语 句 。 

让 … 语 句 可 在 指定 的 条 件 下 执行 某 段 代码 。 




















if (expression){ 
statements; 


} 


在 上 面 的 代码 中 ， 各 关键 词 含义 如 下 所 示 。 

@ expression: 让 语句 判断 条 件 的 表达 式 。 

@ statements: 当 表达 式 成 立时 执行 的 语句 。 

这 … 语 句 是 判断 单个 条 件 的 语句 . 通常 用 于 最 简单 的 条 件 判 断 。 判 断 条 件 的 表达 式 通常 可 以 运算 并 获 
得 逻辑 值 类 型 的 结果 。 

(2) 论 …else… 语 句 。 

这 …else… 语 句 是 让 … 语 句 的 补充 ， 既 可 在 条 件 成 立时 执行 一 段 代 码 ， 也 可 在 条 件 不 成 立时 执行 另 一 
段 代码 。 





if (expression) { 
statements1; 

} elsef 
statements2; 


} 


在 上 面 的 代码 中 ， 各 关键 词 的 含义 如 下 。 

Q@ expression: 站 语 句 判断 条 件 的 表达 式 。 

@ statements1: 当 表达 式 成 立时 执行 的 语句 。 

@ statements2: 当 表 达 式 不 成 立时 执行 的 语句 。 

让 …else… 语 句 也 是 单个 条 件 的 判断 语句 ， 使 用 让 …else… 语 句 可 以 建立 简单 的 分 支 结构 。 

(3) 下 …else 下 … 语 句 。 

让 …else 计 … 语 句 的 作用 是 对 多 个 条 件 的 表达 式 进 行 判 断 ， 根 据 表达 式 成 立 与 否 执 行 多 种 代码 。 





if (expressionl) { 





JavaScript 





Statements17 


else if (expression2) 1{ 


statements2; 


else if (expression3) { 
statements3; 
| Se | 
statementsn-1; 
} else { 
statementsn; 


} 


在 上 面 的 代码 中 ， 各 关键 词 的 含义 如 下 。 

@ expression1~expression3: 多 个 条 件 的 表达 式 。 

@ statements1l~statementsn: 相应 条 件 的 表达 式 成 立时 执行 的 语句 。 
@ n: 条 件 的 数量 。 

(4) switch…case 语句 。 

在 判断 多 个 并 列 的 条 件 时 ， 可 使 用 switch…case 语句 。 





Switch (expression) { 
case Valuel: 
Statementsl7 
break; 
case value2: 
statements2; 
break; 


default: 
defaultstatements; 


} 


在 上 面 的 代码 中 ， 各 关键 词 的 含义 如 下 。 

@ expression: switch 语句 判断 条 件 的 表达 式 。 

@ valuel~value2: 条 件 表 达 式 的 值 。 

@ statementsl~statements2. 当 条 件 表达 式 的 值 为 对 应 的 值 时 执行 的 代码 。 
@ defaultstatements: 当 所 有 条 件 表达 式 的 值 都 不 符合 时 执行 的 代码 。 


21.6.2 ”循环 语句 


循环 语句 可 以 重复 地 执行 一 些 语句 .直到 满足 循环 终止 的 条 件 为 止 。 在 编写 代码 时 ,使 用 循环 可 以 
简化 程序 ， 提 高 程序 的 执行 效率 。 

在 JavaScript 中 ， 主 要 的 循环 语句 有 三 种 。 

(1) while… 语 句 。 

while 循环 语句 是 一 种 简单 的 循环 语句 ， 仅 由 一 个 循环 条 件 和 循环 体 组 成 。 

while 语句 的 使 用 方法 和 站 语句 类 似 ， 都 是 通过 判断 表达 式 来 决定 是 否 执行 其 所 属 的 语句 块 。 
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while (expression) { 
statements 


} 





在 上 面 的 语句 中 ， 各 关键 词 的 含义 如 下 。 

@ expression: 判断 循环 是 否 继续 执行 的 表达 式 。 

@ statements: 循环 的 循环 节 。 

(2) do…while… 语 句 。 

do…while… 语 句 其 实 是 while… 语 句 的 另 一 种 书写 方式 。 使 用 do…while… 语 句 时 ， 需 要 将 循环 节 写 
在 前 面 ， 而 将 判断 语句 写 在 后 面 。 

dof{ 


statements 
} while (expression) 





在 上 面 的 语句 中 ， 各 关键 词 的 含义 如 下 。 

O@ statements: 循环 的 循环 节 。 

@ expression: 判断 循环 是 否 继续 进行 的 表达 式 。 

(3) for… 语 句 。 

for 循环 语句 是 一 种 复杂 的 循环 语句 ，JavaScript 中 的 for 循环 语句 支持 用 计数 器 对 循环 的 次 数 进行 
计数 。 

for (counter=initialvalue;counter<=[>=]limited; extent) { 


statements 


站 





在 上 面 的 语句 中 ， 各 关键 词 的 含义 如 下 。 

Q@ counter， 循环 的 计数 器 。 

@ initialvalue， 循环 计数 器 的 初始 值 。 

@ limited: 循环 计数 器 的 最 大 值 或 最 小 值 。 

@ extent: 循环 计数 器 递增 或 递减 的 幅度 ， 通 常 为 conter+=Numeric 或 conter-=Numeric。 
@ statements: 循环 节 。 

(4) for…in 语句 。 


for…i 语句 的 作用 是 循环 遍历 数组 或 对 象 中 元 素 或 成 员 。 








Eor ( variable in array[object]){ 
statements; 


} 


在 上 面 的 代码 中 .各 关键 词 的 含义 如 下 。 
Q@ variable， 需要 遍历 对 比 的 变量 名 。 
@ array: 被 遍历 的 数组 。 

@ object: 被 遍历 的 对 象 。 

@ statements: 循环 节 。 
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通常 在 进行 复杂 的 程序 设计 时 ， 总 是 根据 所 要 完成 的 功能 将 程序 划分 为 一 些 相对 独立 的 部 分 ， 每 部 
分 编写 一 个 函数 ， 从 而 使 各 部 分 充分 独立 、 任 务 单一 、 程 序 清晰 、 易 维护 。 

JavaScript 函数 可 以 封装 那些 在 程序 中 可 能 要 多 次 用 到 的 模块 . 并 可 作为 事件 驱动 的 结果 而 调用 的 程 
序 ， 从 而 实现 一 个 函数 与 相应 的 事件 驱动 相关 联 。 

定义 JavaScript 函数 的 语法 形式 如 下 : 











function 函数 名 称 ( [ 参数 ] ) 


// 函 数 体 ， 实 现 语句 
[ return 值 ; ] 
} 


其 中 , 使 用 function 来 声明 创建 的 函数 , 之 后 紧 跟 的 是 函数 名 称 ,与 变量 的 命名 规则 一 样 , 也 就 是 只 
包含 字母 、 数 字 、 下 画 线 ， 以 字母 开始 ,不 能 与 保留 字 重复 等 。 在 括号 中 定义 了 一 串 传递 到 函数 中 的 某 
种 类 型 的 值 或 者 变量 ， 多 个 参数 之 间 使 用 逗号 隔 开 。 声 明 后 的 两 个 大 括号 非常 必要 ， 其 中 包含 了 需要 让 
函数 执行 的 命令 ， 来 实现 所 需 的 功能 。 

函数 还 可 以 返回 一 个 结果 ， 函数 的 结果 由 retum 语句 返回 。return 语句 能 够 用 来 返回 可 计算 出 单一 值 
的 任何 有 效 表 达 式 。 

系统 函数 不 需要 创建 ， 也 就 是 说 用 户 可 以 在 任何 需要 的 地 方 调用 ， 如 果 函 数 有 参数 还 需要 在 括号 中 
指定 传递 的 值 。 如 表 21-8 所 示 列 出 了 常用 的 系统 函数 。 


表 21-8 常用 的 系统 函数 





















































函数 名 称 全 人 
eval() 返回 字符 串 表 达 式 中 的 值 


parselnt0) | 返回 不 同 进 制 的 数 ， 获 认 是 十 进 抽 

parseFloatO | 返回 实数 

escape() 返回 字符 的 编码 

encodeURI | 返回 一 个 对 URI 字符 串 编码 后 的 结果 

decodeURI “| 将 一 个 已 编码 的 URI 字符 串 解码 成 最 原始 的 字符 串 返回 
unEscape (0 | 返回 字符 串 ASCI 码 





























isNaNO 检测 parseInt0 和 parseFloat0 示 数 返回 值 是 否 为 非 数值 型 , 如 果 是 , 返回 true; 否则 , 返回 false 
abs(x) 返回 X 的 绝对 值 

acos(x) 返回 X 的 反 余弦 值 ( 余 弦 值 等 于 x 的 角度 ) ， 用 弧度 表示 

asin(x) 返回 XX 的 反正 弦 值 

atan(x) 返回 X 的 反正 切 值 

atan2(x, y) 返回 复 平面 内 点 (x, 对 应 的 复数 的 幅 角 ， 用 统 度 表示 ， 其 值 在 - 到 x 之 间 

ceil(x) 返回 大 于 等 于 x 的 最 小 整数 

cos(x) 返回 X 的 余弦 

exp(x) 返回 e 的 Xx 次 震 (ex) 








floor(x) 返回 小 于 等 于 区 的 最 大 整数 
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续 表 
函数 名 称 区 
log(x) 返回 X 的 自然 对 数 (Inx) 
max(a, b) 返回 a,b 中 较 大 的 数 
min(a, b) 返回 a,b 中 较 小 的 数 
pow(n, m) 返回 1 的 和 m 次 知 (nm) 
random() 返回 大 于 0 小 于 1 的 一 个 随机 数 
round(x) 返回 X 四 使 五 入 后 的 值 














sin(x) 返回 XX 的 正弦 
sqrt(x) 返回 X 的 平方 根 
tan(x) 返回 X 的 正切 





如 果 括 号 内 的 数字 是 “有 限 ” 的 〈 介 于 NumberMIN_ VALUE 和 NumberMAX VALUE 之 间 ) 





wine0 就 返回 true; 否则 返回 false 

SNaNO 如 果 括 号 内 的 值 是 NaN 则 返回 true; 否则 返回 false 

toStringO 用 法 : < 对 和 象 >.toString0; 把 对 象 转 换 成 字符 串 。 如 果 在 括号 中 指定 一 个 数值 ， 则 转换 过 程 中 
所 有 数值 转换 成 特定 进 制 


pA, 如 综合 实战 


本 章 概要 性 地 介绍 JavaScript 在 房产 网 站 中 的 应 用 . 主要 内 容 有 房地产 网 站 分 类 、 房 地 产 网 站 的 设计 
要 点 、 不 动产 网 站 的 设计 风格 、JavaScript 概述 、 运 算 符 和 表达 式 、 控 制 语句 、 内 置 函数 ， 为 本 书后 续 的 
学 习 打 下 坚实 的 基础 。 主 要 讲述 如 何在 网 站 建设 中 应 用 JavaScript， 制 作 吸引 人 的 网 站 的 一 些 方法 和 相关 
技术 ， 接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进 行 实践 。 
21.8.1 实战 : 设计 房地产 网 站 首页 

设计 房地产 企业 的 网 站 ， 首 先 要 为 其 安排 合理 的 布局 、 清 晰 的 网 页 内 容 ， 以 及 选用 统一 的 色彩 。 房 
地 产 类 网 站 在 字体 选择 上 .应 尽量 选择 粗 体 以 体现 出 企业 雄厚 的 实力 。 网 站 的 色调 要 与 企业 宣传 的 产品 


相关 。 以 如 图 21-17 所 示 的 网 站 为 例 , 由 于 为 夏季 淡季 促销 做 宣传 . 因此 网 站 的 主 色调 选择 了 给 人 清凉 感 
觉 的 青色 。 本 例 主要 练习 添加 表格 、 设 置 表格 属性 、 添 加 Flash 导航 条 、 谋 入 帧 。 

























































图 21-17 房地产 网 站 首页 


418 





[ 


::::; 第 21 章 JavaScript 





eeeoe 





STEP|01 新 建文 档 “index.html*， 右 击 执行 【页 面 属 性 】 命 令 ， 在 弹出 的 窗口 中 设置 页 面 的 4 边 边 距 均 
为 0 像素 ， 如 图 21-18 和 图 21-19 所 示 。 
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图 21-19 【页 面 属 性 〗 对 话 框 


STEP|02 在 网 页 中 插入 一 个 4 行 x4 列 的 布局 表格 .设置 表格 的 宽 。 合 并 表格 的 前 3 行 单元 格 , 并 在 第 
1 行 单元 格 中 插入 Flash 导航 条 。 分别 将 表格 的 第 2 行 和 第 3 行 单元 格 合并 , 设置 高 度 , 并 插入 背景 图 像 , 
如 图 21-20 所 示 。 
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图 21-20 【属性 】 面 板 


STEP|03 设置 表格 第 4 行 第 1 列 单元 格 的 高 度 和 宽度 . 并 为 其 插入 背景 。 设 置 表格 第 4 行 第 2 列 单元 格 
的 大 小 ， ee 个 8 行 x1 列 的 表格 以 制作 导航 条 . 表格 宽 为 150 像素 。 设 置 导航 条 表格 中 各 单 
元 格 的 高 度 ， 并 为 其 添加 背景 。 在 导航 条 中 输入 导航 文本 ， 设 置 CSS 样式 。 样 式 代码 如 下 : 








.menu0l1 1{ 

font-family: "微软 雅 黑 ", font-size: 14px; 
/* 定 义 文本 的 字体 类 型 和 字体 大 小 */ 
font-weight: bold;color: #000000; 

/* 定 义 文本 字体 为 粗 体 ， 颜 色 为 黑色 (#000000) */ 
text-decoration: none; 


/* 定 义 文本 无 下 画 线 */ 
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text—-indent: 20px; 
/* 定 义 文本 在 段 首 缩 进 20 像素 */ 
vertical-align: bottom;} 


/*# 定 义 文本 在 单元 格 中 的 重 直 对 齐 方式 为 底部 对 齐 */ 


效果 如 图 21-21 所 示 。 

STEP|04 为 布局 表格 第 4 行 第 3 列 的 单元 格 设置 大 小 和 背景 。 在 布局 
表格 第 4 行 第 4 列 的 单元 格 中 插入 一 个 2 行 x2 列 的 表格 . 合并 表格 第 
2 行 的 单元 格 。 设 置 表格 各 单元 格 的 高 度 和 宽度 ， 并 为 表格 第 1 行 第 2 
列 和 第 2 行 的 单元 格 插入 背景 。 切 换 至 代码 视图 在 表格 第 1 行 第 1 列 
的 单元 格 中 插入 嵌入 帧 代码 <iframe> </ifame>， 并 设置 嵌入 帧 属性 。 保 
存 文档 ， 在 Dreamweaver CS6 中 新 建文 档 ， 将 其 保存 为 mainbody.html. 
设置 其 页 面 边 距 为 0， 并 制作 页 面 内 容 ， 如 图 21-22 和 图 21-23 所 示 。 

STEP|05 保存 文档 ， 在 Dreamweaver 中 新 建文 档 ， 将 其 保存 为 
companyhtml， 设 置 其 页 面 边 距 为 0 添加 企业 的 义务 和 责任 等 相关 内 
容 。 用 相同 的 方法 制作 左 侧 导航 栏 所 导航 的 嵌入 页 面 . 其 中 .aboutushtml 
页 面 介 绍 企业 的 相关 信息 . contacthtml 页 面 介绍 企业 的 联系 方式 。 制 作 
左 侧 导 航 栏 嵌 入 页 面 recruitment.html， 用 于 介绍 企业 的 招聘 信息 。 在 
index.html 文档 中 ， 在 左 侧 导航 条 中 设置 导航 条 打开 嵌入 页 的 链接 ， 即 可 完成 页 面 的 制作 ， 如 图 21-24 所 示 。 
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图 21-21 页 面 效果 
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图 21-22 CSS 样式 代码 图 21-23 页 面 效 果 
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21.8.2 ”实战 : 设计 三 水 城市 花园 主页 多 兴业 豆 居 钾 业 棵 团 


为 吸引 更 多 购房 者 购买 房产 , 房地产 企业 通常 会 为 其 开发 的 
小 区 或 商业 楼 宇 等 产品 制作 网 站 。 在 设计 这 类 网 站 时 需要 追求 个 
性 化 的 视觉 效果 ， 以 给 购房 者 留 下 深刻 印象 。 本 练习 将 使 用 
Dreamweaver 设计 一 个 房地产 产品 网 站 .主要 练习 添加 表格 、 设 
置 表格 属性 、 使 用 库 面板 、 使 用 模板 和 创建 可 编辑 区 域 ， 如 图 025m AEs 
21-25 所 示 。 一 一 Se 
STEP|01 新 建 网 页 文档 ， 将 其 保存 为 index html， 为 网 页 设置 页 ES  . 
面 边 距 并 绘制 一 个 3 行 x4 列 的 布局 表格 ， 如 图 21-26 所 示 。 图 21-24 页 面 效 果 
STEP|02 为 布局 表格 插入 背景 图 像 。 将 布局 表格 第 一 行 的 单元 格 合并 ， 设 置 单元 格 的 高 度 为 59 像素 。 
在 单元 格 中 插入 一 个 1 行 x2 列 的 表格 ,设置 表格 各 单元 格 的 宽度 .并 在 表格 第 2 列 输入 网 页 导航 条 文本 。 
将 布局 表格 第 2 行 中 的 第 1 列 和 第 2 列 单元 格 合并 ， 分 别 设置 第 3 列 和 第 4 列 单元 格 的 宽度 为 757 像素 
和 111 像素 。 将 布局 表格 中 第 2 行 和 第 3 行 的 第 3 列 单元 格 合并 ， 作 为 网 页 主题 部 分 的 布局 单元 格 ， 如 
图 21-27 所 示 。 
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图 21-25 页 面 效 果 
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图 21-26 页 面 效果 





图 21-27 页 面 效 果 


STEP|03 在 表格 第 3 行 第 2 个 单元 格 内 插入 一 个 6 
行 x1 列 的 表格 ,在 表格 中 插入 按钮 制作 左 侧 导航 条 。 
在 网 页 主题 部 分 单元 格 中 插入 一 个 1 行 x2 列 的 表格 ， 
设 定 表格 高 度 和 宽度 ， 在 表格 第 1 列 的 单元 格 中 再 插 
入 一 个 7 行 x3 列 的 表格 。 在 表格 中 插入 背景 ， 制 作 
网 页 主题 部 分 的 背景 图 像 。 在 主题 的 表格 中 输入 内 容 . 
并 为 其 制作 链接 + 如 图 21-28 所 示 。 

STEP|04 选择 表格 第 5 行 的 单元 格 .在 单元 格 内 制作 
网 页 的 底部 导航 栏 ， 并 设置 链接 。 在 表格 第 6 行 的 单 
元 格 中 输入 网 页 的 版 权 信息 ， 如 图 21-29 所 示 。 
STEPI05 用 同样 的 方法 制作 网 页 主题 内 容 的 右 半 部 
分 ， 将 网 页 中 的 小 导航 条 、 左 侧 的 导航 条 、 底 部 导航 图 21-28 页 面 效果 
条 新 建 为 库 项 目 文件 ， 如 图 21-30 所 示 。 


























3 网 页 设计 与 网 站 建设 自学 经 典 : 


网 页 设计 与 网 站 建设 自学 经 典 





STEP|06 将 网 页 的 主题 部 分 内 容 删 除 ， 然 后 将 其 另存 为 模板 。 在 模板 中 插入 可 编辑 区 域 ， 将 模板 保存 ， 
并 通过 模板 建立 新 的 子 页 面 。 在 子 页 面 的 可 编辑 区 域 中 插入 表格 .制作 主题 部 分 并 保存 。 根 据 子 页 面 的 
文件 名 更 新 库 项 目 ， 并 为 整个 站 点 的 页 面 进行 更 新 。 用 同样 的 方法 使 用 模板 和 库 项 目 创建 网 站 其 他 页 面 , 
即 可 完成 网 站 的 制作 。 





加 入 三 水 城市 花园 黄金 旺 铺 
党 择 三 水 城市 花园 的 四 大 理由 : 地 理 位 置 优 过 ， 立 订 便 利 ， 
庆生 证 人 失 和 
EE ?您 还 在 等 什么 呢 ? 





图 21-29 页 面 效 果 图 21-30 页 面 效果 
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表单 是 制作 交互 式 网 页 的 基本 元 素 .通过 在 网 页 中 插入 各 类 表单 元 素 , 设计 者 可 以 制作 出 例如 注册 、 
登录 、 问 答 等 网 页 文档 。 本 章 将 向 大 家 介绍 教育 类 网 站 的 分 类 和 设计 特点 ， 然 后 通过 一 个 典型 的 教育 网 
站 来 介绍 教育 类 网 站 的 制作 方法 。 

详细 介绍 表单 在 网 站 建设 中 的 应 用 ， 主 要 内 容 有 教育 网 站 类 别 、 教 育 类 网 站 设计 特点 、 教 育 类 网 站 


模式 、 表 单 及 表单 对 象 、 插 入 按钮 对 象 、Spry 表单 和 综合 实战 。 通 过 本 章 的 学 习 我 们 可 以 知道 怎样 在 网 
站 中 应 用 表单 。 
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网 页 设计 与 网 站 建设 自学 经 典 








教育 网 站 类 别 





网 络 快速 发 展 的 今天 ,国内 教育 网 站 不 断 涌现 出 来 ， 其 建设 主体 有 机 构 、 企 业 、 学 校 、 教 师 以 及 个 
人 等 。 本 节 主 要 讲述 教育 网 站 类 别 . 内容 主 要 包括 教育 行政 部 门 网 站 、 教 育 研究 机 构 网 站 、 企 校 合 办 网 
站 、 社 会 专业 机 构 网 站 、 学 校 网 站 和 教师 个 人 网 站 。 用 户 通过 本 节 的 学 习 可 以 了 解 教育 网 站 类 别 ， 为 后 
面 的 网 站 建设 商定 基础 。 


22.1.1 教育 行政 部 门 网 站 





教育 行政 部 门 网 站 的 主要 内 容 包括 介绍 部 门 的 结构 和 职能 、 发 布 与 教育 相关 的 新 闻 动 态 和 政策 法 规 、 
提供 网 上 办 事 通 道 等 ， 它 所 面向 的 对 象 为 教育 工作 者 。 在 设计 该 类 型 的 网 站 时 ,通常 采用 红色 为 主 色调 ， 
以 表现 出 网 站 的 正式 与 权威 。 例 如 湖北 省 教育 厅 网 站 ， 如 图 22-1 所 示 。 


(全 湖北 省 教育 厅 















(9) EE 办 区 再 名 | 密生 二 站 


> 径 币 然 部 -— 
ws - He | 9 mi 


本 全 让 用 部 加 但 其 焊 / 季 洁 前 







CELLLIL 





， 居间 考 人 二 二 卫 放行 昼 万 理 任 芍 六 并 


守 贡 有 玉 福生 供 前 全 生理 革 坦 居 ~ 品 二 和 有 人 天 小 要 pe 各 放 帮 明生 
， 语 机 训 时 半月 工作 六 让 于 工 Das peng oth 
有 们 旧作 了 共 于 开机 权时 页 有 pr 
-前 各 内 时 章 香 凋 何 生 让 目标 站 他 和 人 
和信 志 [人 ] O 半 汪 no 年 全 间 生 及 EZIT 肌 和 他 
汕 人 三 办 委 实 襟 次 王 本 区 [ 而 ] ' 入 了 中心 名 单 兴 御 
0 Pa 
， 天 和 刘 区 信 本 上 本 村 信 御 机 加 
1 0 作用 本 人 生生 委 薪 现场 而 。 时) 
“ 训 且 用 而 a 5 革 必 印 测 er 
人 oN 
SD Ed + 抽 和 加 二 兴 


图 22-1 教育 行政 部 门 网 站 


22.1.2 ”教育 研究 机 构 网 站 

教育 研究 机 构 通常 以 研究 和 发 展 教育 为 主要 目的 . 网 站 中 通常 会 提供 教研 新 闻 动态 、 教 研讨 论 平台 
和 教育 教学 资源 等 ， 面 向 的 对 象 同 样 为 教育 工作 者 。 在 设计 该 类 型 网 站 时 .由 于 内 容 以 文字 信息 为 主 . 
所 以 需要 注意 文字 与 文字 之 间 的 距离 。 例 如 郑州 教育 信息 网 ， 如 图 22-2 所 示 。 
































图 22-2 教育 研究 机 构 网 站 


22.1.3” 企 校 合 办 网 站 


企 校 合 办 的 教育 网 站 通常 以 网 校 的 形式 出 现 ， 主 要 目的 是 提供 课堂 教学 同步 辅导 、 提 高 学 生 学 习 能 
力 ,便于 学 生 更 好 更 快 地 掌握 课本 知识 .面向 的 对 象 主要 为 学 生 。 在 设计 该 类 型 的 网 站 时 ,色彩 搭配 通 
常 较为 活泼 自然 ， 给 人 一 种 轻松 愉快 的 感觉 。 例 如 黄冈 中 学 网 校 ， 如 图 22-3 所 示 。 



















SMM 2 EE Ey me Nr 和 
en Se UE MN Me Me a rE rE 
2 0 0 Ne MS WE EE Ec 
en 
Ue 


图 22-3 企 校 合 办 网 站 


22.1.4 社会 专业 机 构 网 站 


社会 专业 机 构 自 办 的 教育 网 站 以 提供 专业 化 加 工 的 主题 知识 资源 和 行业 知识 信息 为 主要 内 容 ， 面向 


的 对 象 为 各 类 学 习 者 。 在 设计 该 类 型 网 站 时 ， 由 于 内 容 涉 及 的 方面 较 多 .所 以 版 面 布局 较为 紧凑 。 例 如 
科普 中 国 网 ， 如 图 22-4 所 示 。 
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网 页 设计 与 网 站 建设 自学 经 典 
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图 22-4 ”社会 专业 机 构 网 站 


22.1.5 ”学 校 网 站 


学 校 类 网 站 主要 宣传 该 校 的 师资 力量 、 设 备 、 以 及 开设 专业 等 。 另 外 ,还 介绍 学 校 的 一 些 基本 情况 、 
提供 校内 动态 新 闻 、 教 育 学 习 资 源 以 及 校内 服务 等 ， 面 向 的 对 象 主要 为 校内 的 师 生 。 在 设计 学 校 网 站 时 ， 
一 般 以 蓝 色 为 主 色 调 ， 给 人 一 种 健康 、 积 极 向 上 的 感觉 。 例 如 中 央 民 族 大 学 的 网 站 ， 如 图 22-5 所 示 。 
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图 22-5 学 校 网 站 
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22.1.6 教师 个 人 网 站 


教师 个 人 网 站 通常 会 提供 教学 研究 经 验 、 教 育 学 习 资 源 、 互 动 学 习 空间 和 个 人 教学 心得 等 内 容 。 该 
类 型 的 网 站 属于 个 人 网 站 .因此 在 设计 上 比较 随意 .可 以 根据 个 人 的 喜好 来 决定 网 站 的 布局 结构 和 色彩 
措 配 等 。 例 如 杨 老师 的 教学 网 站 ， 如 图 22-6 所 示 。 
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图 22-6 教师 个 人 网 站 


了 多 届 教育 类 网 站 设计 特点 


教育 网 站 的 建立 ， 其 主要 目的 之 一 就 是 改革 学 习 方式 和 教学 方式 ， 从 而 实现 教育 现代 化 。 教 育 类 网 
站 在 设计 上 具有 广泛 性 和 独特 性 。 本 节 主 要 讲述 教育 类 网 站 设计 特点 ， 内 容 主要 包括 以 思想 教育 为 导向 、 
以 知识 教育 为 内 容 、 结 构 清晰 分 明和 风格 活泼 有 序 。 用 户 通过 本 节 的 学 习 可 以 了 解 教育 类 网 站 设计 特点 
为 后 面 的 网 站 建设 奠定 基础 。 


22.2.1 以 思想 教育 为 导向 
思想 教育 对 学 生 乃 至 整个 社会 都 发 挥 着 积极 向 上 的 作用 。 教 育 网 站 作为 宣传 和 推广 教育 的 一 个 网 络 


平台 ， 如 青少年 宫 在 线 网 站 ， 不 仅 向 青少年 传播 各 类 课外 知识 .还 担负 着 对 青少年 进行 思想 政治 教育 的 
任务 ， 如 图 22-7 所 示 。 


22.2.2 ”以 知识 教育 为 内 容 


教育 类 网 站 的 主要 服务 宗旨 是 传播 正确 的 文化 知识 ， 面 向 的 对 象 为 广大 学 生 。 因 此 ， 教育 类 网 站 的 
一 个 特点 就 是 准确 发 布 知识 内 容 、 合 理 展 示 知 识 内 容 。 例 如 灵 豚 学 习 网 ， 该 网 站 包含 了 基础 、 专 业 、 生 
活 等 各 类 知识 . 是 一 个 以 传播 文化 知识 为 主要 目的 的 网 站 .如 图 22-8 所 示 。 























图 22-7 以 思想 教育 为 导向 的 网 站 
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图 22-8 ”以 知识 教育 为 内 容 的 网 站 


22.2.3 ”结构 清晰 分 明 


教育 类 网 站 是 用 来 传播 文化 知识 的 。 因 此 .在 设计 该 类 型 的 网 站 时 ， 版 面 布局 要 方正 ， 内 容 展 示 要 
清晰 明了 ,使 学 习 者 可 以 快速 地 查找 到 所 需要 的 信息 。 例如 24EN 网 .该 网 站 版 面 大 气 、 规 则 .各 个 栏目 
的 分 类 清晰 、 位 置 显著 . 使 浏览 者 很 容易 找到 自己 所 需 的 内 容 。 如 图 22-9 所 示 。 
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图 22-9 ”结构 清晰 分 明 的 网 站 





22.2.4 风格 活 泌 有 序 


教育 类 网 站 是 以 教育 为 服务 宗旨 ， 因 此 ， 在 教育 类 网 站 中 ,除了 需要 显示 有 教育 意义 的 内 容 之 外 ， 
在 网 页 设计 风格 上 也 要 具有 实际 的 意义 。 例 如 南京 市 下 关 区 少年 宫 的 网 站 ,该 网 站 以 卡通 图 像 为 主 ， 在 
色彩 搭配 上 也 活泼 正气 、 不 失 华 丽 ， 符 合 少年 儿童 的 审美 要 求 ， 如 图 22-10 所 示 。 


Hs Et 


,，_ 者 总 市 下 区 区 少年 客 ” 
We 
党 








MR rr :9 
_ | pes resh MN 
ss “由 








图 22-10 ”风格 活 小 有 序 互 动 学 习 网 站 
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22.3 | 教育 类 网 站 模式 


育 类 网 站 的 主要 目的 就 是 宣传 和 推广 教育 ， 引 导 学 生 正 确 学 习 课 本 知识 、 理 解 教育 目的 、 提 高 文 
化 水 平 。 本 节 主 要 讲述 教育 类 网 站 模式 .内 容 主要 包括 互动 学 习 模式 、 主 题 资 讯 模式 、 教 育 科研 模式 和 
综合 模式 。 用 户 通过 本 节 的 学 习 可 以 了 解 教育 类 网 站 模式 ， 为 后 面 的 网 站 建设 奠定 基础 。 


22.3.1 互动 学 习 模 式 


互动 学 习 模式 的 网 站 主要 提供 探究 学 习 学 案 、 互 动 交流 途径 、e 化 教材 、 各 类 智慧 资源 等 ,直接 为 基 
于 网 络 应 用 的 课堂 教学 、 自 主 学 习 服 务 。 
1. 简易 型 

例如 新 e 代 设计 与 工艺 网 ， 此 网 站 以 网 络 主题 探究 学 案 为 主线 索 ， 将 作品 鉴赏 、 设 计 与 工艺 知识 、 
知识 资源 等 版 块 整合 为 课程 的 e 化 教材 。 通 过 学 生 作业 、 互 动 讨论 等 版 块 使 得 课堂 交流 更 加 方便 快捷 。 
2. 专业 型 

例如 CSDN (世纪 乐 知 ) ， 此 网 站 是 一 家 服务 于 IT 专业 人 士 学 习 与 成 长 的 领先 综合 社区 服务 平 
全 .为 广大 学 习 者 提供 资源 下 载 和 讨论 社区 ， 如 图 22-11 所 示 。 
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图 22-11 互动 学 习 模 式 网 站 


22.3.2 ”主题 资讯 模式 


主题 资讯 模式 的 网 站 主要 是 围绕 某 一 主题 的 各 类 信息 . 进行 较为 深入 、 全 面 的 知识 加 工 和 信息 组 织 。 
1. 简易 型 

例如 英语 网 ， 此 网 站 围绕 英语 主题 进行 展开 . 主要 包括 中 小 学 英语 和 应 用 性 英语 .并 针对 各 个 不 同 
层次 的 英语 更 进一步 地 分 类 及 深化 。 














2. 专业 型 
例如 中 国文 化 研究 院 ， 此 网 站 根据 专题 组 织 信息 资源 。 这 些 专 题 包 括 中 国 漫画 、 中 国 铜 镜 艺术 、 中 
国民 间 艺 术 、 中 国 佛像 艺术 、 古 琴 等 ， 是 探究 学 习 的 优质 网 络 主题 资源 ， 如 图 22-12 所 示 。 
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图 22-12 主题 资讯 模式 网 站 


22.3.3 教育 科研 模式 


教育 科研 模式 的 网 站 主要 用 来 研究 交流 教育 教学 ， 汇 编 课 例 、 教 案 ， 提 供 相关 网 络 信息 资源 等 ， 可 
以 实现 自由 发 布 观点 、 集 中 组 织 情报 、 交 流 互动 等 功能 。 
1. 简易 型 

例如 湘 教 在 线 ， 此 网 站 通过 教育 论 从 、 教 案 设计 、 教 学 论文 、 教 学 视频 等 多 个 版 块 对 教育 教学 进行 
研究 交流 ， 并 提供 课件 的 下 载 。 另 外 .还 为 语文 、 数 学 和 英语 三 大 学 科 设 置 专门 的 版 块 ， 以 便 更 加 专业 
地 进行 研究 和 讨论 。 
2. 专业 型 

例如 株洲 教育 科研 网 ， 此 网 站 为 株洲 教育 科研 机 构 所 建立 的 ， 对 中 国 中 小 学 阶段 的 教育 进行 了 专业 
化 、 系 统 化 的 研究 ， 并 设置 有 教研 论坛 ,为 教育 工作 者 提供 了 交流 互动 的 平台 ,如 图 22-13 所 示 。 


22.3.4 ”综合 模式 


综合 模式 的 网 站 混合 了 上 述 三 种 功能 的 网 站 ， 不仅 提供 了 教育 教学 研究 交流 的 平台 ， 而 且 还 为 广大 
学 习 者 提供 了 大 量 的 学 习 资源 。 
1. 简易 型 

例如 第 二 教育 网 ， 此 网 站 提供 了 从 初 三 到 高 三 各 个 学 科 的 教学 学 习 资源 、 中 小 学 校 用 的 教学 辅助 用 






































页 设计 与 网 站 建设 自学 经 典 


网 页 设计 与 网 站 建设 自学 经 典 





品 ， 并 提供 了 博客 和 论坛 ， 以 方便 研究 与 交流 。 
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图 22-13 教育 科研 模式 网 站 


2. 专业 型 
例如 全 国 中 小 学 教师 继续 教育 网 ， 此 网 站 提供 优质 的 课程 资源 ， 是 承担 中 小 学 教师 继续 教育 、 
课 改 与 教研 任务 的 国家 级 专业 网 站 .如 图 22-14 所 示 。 
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表单 及 表单 对 象 





通过 提交 表单 ， 可 以 将 用 户 在 表单 中 输入 的 一 些 信息 传递 到 服务 器 端 并 进行 处 理 ， 实 现 网 站 中 经 常 
用 到 的 留言 板 、 反 馈 信息 等 功能 。 本 节 主 要 讲述 两 个 方面 的 内 容 . 主要 包括 添加 表单 和 添加 表单 对 象 。 
用 户 通过 本 节 的 学 习 可 以 了 解 表单 及 表单 对 象 ， 为 后 面 的 网 站 建设 商定 基础 。 


22.4.1 表单 的 基础 知识 


表单 在 网 页 中 是 提供 给 访问 者 填写 信息 的 区 域 ， 从 而 可 以 收集 客户 端 信息 ， 使 网 页 更 加 具有 交互 的 
功能 。 
1. 表单 的 概念 

表单 一 般 被 设置 在 一 个 HTML 文档 中 ,访问 者 填写 相关 信息 后 提交 表单 ， 表 单 内 容 会 自动 从 客户 端 
的 浏览 器 传送 到 服务 器 上 ,经 过 服务 器 上 的 ASP 或 CGI 等 程序 处 理 后 ,再 将 访问 者 所 需 的 信息 传送 到 客 
户 端 的 浏览 器 上。 几乎 所 有 网 站 都 应 用 了 表单 ， 例 如 搜索 栏 、 论 坛 和 订单 等 。 

表单 是 由 窗 体 和 控件 组 成 的 ， 一 个 表单 一 般 包 含 用 户 填写 信息 的 输入 框 和 提交 按钮 等 ， 这 些 输入 框 
和 按钮 叫做 控件 。 表 单 用 <form></form> 标 记 来 创建 ， 在 <formm></form> 标 记 之 间 的 部 分 都 是 表单 的 内 容 。 
<form> 标 记 具 有 action、method 和 target 属性 。 

action: 处 理 程序 的 程序 名 ， 例 如 <form action-"URL">， 如 果 属 性 是 空 值 ， 则 当前 文档 的 URL 将 被 
使 用 ， 当 提交 表单 时 ， 服 务 器 将 执行 程序 。 

method: 定义 处 理 程序 从 表单 中 获得 信息 的 方式 ， 可 以 选择 GET 或 POST 中 的 一 个 。GET 方式 是 处 
理 程序 从 当前 HTML 文档 中 获取 数据 ， 这 种 方式 传送 的 数据 量 是 有 限制 的 ,一 般 在 1KB 之 内 。POST 方 
式 是 当前 HTML 文档 把 数据 传送 给 处 理 程序 ， 传 送 的 数据 量 要 比 使 用 GET 方式 大 得 多 。 

target: 指定 目标 窗口 或 帧 .可 以 选择 当前 窗口 _self. 父 级 窗口 _parent, 顶层 窗口 _top 和 空白 窗口 _blank。 
2. 表单 的 对 象 

在 Dreamweaver 中 ， 表 单 输入 类 型 称 为 表单 对 象 。 用 户 要 在 网 页 文档 中 插入 表单 对 象 ， 除 了 可 以 选 
择 【 插 入 】| 【表单 】 命 令 以 外 .还 可 以 选择 【窗口 】|【 插 入】 命令 ， 显 示 【 插 入 】 面 板 ， 然 后 单 击 【 插 
入 】 面 板 中 的 国 | 按钮 ， 在 弹出 的 菜单 中 选择 【表单 〗 命 令 ， 打 开 【 表 单 】 窗 口 。 接 下 来 ， 在 【表单 】 窗 
口中 单 击 相应 的 表单 对 象 按钮 即 可 插入 表单 。 

在 【表单 】 窗 口中 比较 重要 的 表单 对 象 按钮 的 功能 如 下 。 

【表单 】 按 钮 回 : 用 于 在 文档 中 插入 一 个 表单 。 访 问 者 要 提交 给 服务 器 的 数据 信息 必须 放 在 表单 里 ， 
只 有 这 样 ， 数据 才 能 被 正确 处 理 。 

【文本 字段 】 按 钮 回 : 用 于 在 表单 中 插入 文本 域 。 文 本 域 可 接受 任何 类 型 的 字母 数字 项 ， 输 入 的 文本 
可 以 显示 为 单行 、 多 行 或 者 显示 为 星 号 (用 于 密码 保护 )。 

【隐藏 域 】 按 钮 回 ， 用 于 在 文档 中 插入 一 个 可 以 存储 用 户 数据 的 域 。 使 用 隐藏 域 可 以 实现 浏览 器 同 服 
务 器 在 后 台 隐 藏 的 交换 信息 .例如 .输入 的 用 户 名 、E-mail 地 址 或 其 他 参数 ， 当 下 次 访问 站 点 时 能 够 使 
用 输入 的 这 些 信息 。 

【文本 区 域 】 按 钮 国 : 用 于 在 表单 中 插入 一 个 多 行文 本 域 。 
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【 复 选 框 】 按 钮 回 : 
一 个 Name 属性 值 ， 实 现 多 项 选择 的 功能 。 
【 单 选 按钮 】 按 钮 回 : 
钮 同时 取消 选择 该 组 中 的 其 他 按钮 。 

















【 单 选 按钮 组 】 按 钮 图 : 用 于 插入 共享 同一 名 称 的 单 选 按钮 的 集合 。 
【列表 /菜单 】 按 钮 图 : 用 于 在 表单 中 插入 列表 或 菜单 。【 列 表 】 选 项 在 滚动 列表 中 显示 选项 值 ， 并 允 
户 在 列表 中 选择 多 个 选项 。[ 菜 单 】 选 项 在 弹出 式 菜单 中 显示 选项 值 , 而 且 只 允许 用 户 选择 一 个 选项 。 
【 跳 转 菜单 】 按 钮 回 : 用 于 在 文档 中 插入 一 个 导航 条 或 者 弹出 式 菜单 。 跳 转 荣 单 可 以 使 用 户 为 链接 文 

















入 一 个 菜单 。 








用 于 在 表单 中 插入 复 选 框 。 在 实际 应 用 中 多 个 复 选 框 可 以 共用 一 个 名 称 , 也 可 以 


用 于 在 表单 中 插入 单 选 按钮 。 单 选 按 钮 代表 互相 排斥 的 选择 ,选择 一 组 中 的 某 





【图 像 域 】 按 钮 国 : 用 于 在 表单 中 插入 一 幅 图 像 。 可 以 使 用 图 像 域 蔡 换 【 提 交 】 按 钮 ， 以 生成 图 形 化 
按钮 。 





【文件 域 】 按 钮 回 : 用 于 在 文档 中 插入 空白 文本 域 和 【浏览 】 按 钮 。 用 户 使 用 文件 域 可 以 浏览 硬盘 上 


件 ， 并 将 这 些 文件 作为 表单 数据 上 传 。 


【按钮 】 按 钮 回 ， 用 于 在 表单 中 插入 文本 按钮 。 按 钮 在 单 击 时 执行 任务 ， 如 提交 或 重 置 表单 ， 也 可 以 


钮 添加 自 定义 名 称 或 标签 。 
4.2 添加 表单 


在 Dreamweaver 中 ， 可 以 将 整个 网 页 创建 为 一 个 
网 页 ， 也 可 以 在 网 页 的 部 分 区 域 中 添加 表单 ， 其 
方法 相同 。 例 如 ， 在 【插入 】 菜 单 栏 中 选择 【 表 
选择 卡 ， 单 击 【 表 单 】 按 钮 即 可 在 文档 中 插入 表 
如 图 22-15 所 示 。 

用 户 也 可 以 切换 到 【代码 】 视 图 模式 中 编辑 表单 。 
. 在 HIML 文档 中 , 表单 域 是 由 标签 <fonrm></form> 
现 的 。 


4.3 





添加 表单 对 象 


在 定义 表单 域 后 ,用户 可 以 在 表单 域 中 添加 各 利 
对 象 。 
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加 表单 


文本 字段 是 表单 最 常 使 用 的 域 。 用 户 可 以 创建 一 个 包含 单行 或 多 行 的 文本 域 . 也 可 以 创建 一 个 隐藏 
用 户 输入 的 密码 域 。 例 如 ， 在 【表单 】 选 项 卡 中 单 击 【 文 本 字段 】 按 钮 ， 即 可 打 姑 


】 对 话 框 ， 为 插入 文本 字段 进行 一 些 简单 的 设置 。 
在 Dreamweaver 中 .用 户 可 单 击 【插入 】 面 板 中 的 【表单 】 
功能 属性 】 对 话 框 中 进行 简单 设置 ， 然 后 在 网 页 中 插入 文本 
于 ， 文 本 区 域 中 的 类 型 属性 默认 选择 【多 行 】， 并 且 文 本 区 域 不 需要 设置 最 多 字符 数 属性 ， 

















要 设置 行 数 属性 。 





F 【输入 标签 辅助 功能 





【文本 区 域 】 按 钮 通过 在 【输入 标签 
区 域 。 文 本 区 域 的 属性 与 文本 字段 非常 





2. 插入 复 选 框 

当 用 户 从 一 组 选项 中 选择 多 个 选项 时 ， 可 以 使 用 复 选 框 。 在 【插入 】 面 板 中 单 击 【 表 单 】|【 复 选 框 】 
按钮 ,然后 在 弹出 的 【输入 标签 辅助 功能 属性 】 对 话 框 中 设置 复 选 框 的 ID 和 标签 等 属性 。 在 插入 复 选 框 
后 ， 用 户 即 可 单 击 复 选 框 ,在 【属性 】 面 板 中 设置 复 选 框 的 各 种 属性 。 

3. 插入 单 选 按 钮 

单 选 按 钮 是 一 种 不 允许 用 户 进行 多 项 选择 的 表单 对 象 。 在 同一 字段 集中 ， 用 户 可 以 插入 多 个 单 选 按 
钮 ， 但 只 能 对 一 个 单 选 按钮 进行 选择 操作 。 使 用 Dreamweaver 打开 网 页 文档 ， 然 后 即 可 单 击 【 插 入 】 面 
板 中 的 【表单 】|【 单 选 按钮 】 按 钮 ， 打开 【 输 入 标签 辅助 功能 属性 】 对 话 框 ， 在 其 中 设置 单 选 按钮 的 一 
些 基本 属性 。 在 插入 单 选 框 后 ， 用户 即 可 单 击 选择 单 选 按钮 ， 在 【属性 】 面 板 中 设置 单 选 按钮 的 属性 。 
4. 插入 列表 /菜单 

列表 /菜单 是 一 种 显示 已 有 数据 的 表单 对 象 ， 可 以 根据 用 户 选择 的 列表 项 目 ， 返回 项 目的 值 。 用 
Dreamweaver 打开 网 页 文档 ， 然 后 ， 即 可 单 击 【 插 入 】 面 板 中 的 【表单 】|【 列 表 / 菜 单 】 按 钮 ， 打 开 【 输 
入 标签 辅助 功能 属性 】 对 话 框 ， 在 对 话 框 中 设置 列表 /菜单 的 基本 属性 ， 然 后 单 击 【 确 定 】 按 钮 ， 插 入 列 
表 / 菜 单 。 

在 插入 列表 /菜单 后 , 即 可 选中 列表 /菜单 . 在 【属性 】 面 板 中 设置 列表 /菜单 的 各 种 属性 。 若 需要 设置 
列表 /菜单 的 选项 ， 可 单 击 【 属 性 】 面 板 中 的 【列表 值 〗】 按 钮 ， 在 弹出 的 【列表 值 】 对 话 框 中 定义 列表 / 
菜单 中 的 项 目标 签 和 值 ， 并 单 击 【 确 定 】 按 钮 。 如 果 列 表 / 菜 单 式 表单 是 以 菜单 形式 存在 的 ， 则 其 【属性 】 
面板 中 的 【高 度 】 和 【 选 定 范围 】 等 选项 将 不 可 用 。 

5. 使 用 检查 表单 行为 

在 Dreamweaver 中 使 用 【检查 表单 】 动 作 ， 可 以 为 文本 域 设置 有 效 性 规则 ， 检 查 文本 域 中 的 内 容 是 
否 有 效 ， 以 确保 输入 数据 正确 。 一 般 来 说 ,可 以 将 该 动作 附加 到 表单 对 象 上 ， 并 将 触发 事件 设置 为 
onSubmit。 当 单 击 【提交 】 按 钮 提交 数据 时 会 自动 检查 表单 域 中 所 有 的 文本 域内 容 是 否 有 效 。 

用 户 在 网 页 中 插入 表单 和 表单 元 素 后 ， 单 击 【 行 为 】 选 项 卡 面板 上 的 【添加 行为 】 按 钮 [ 国 ， 然 后 
在 弹出 的 下 拉 列 表 中 选择 【检查 表单 】 选 项 ， 即 可 打开 【检查 表单 】 对 话 框 ， 设 置 检查 页 面 中 的 表单 
参数 。 

【检查 表单 】 对 话 框 中 主要 参数 选项 的 具体 作用 如 下 。 

【 域 】 列 表 框 .用 于 选择 要 检查 数据 有 效 性 的 表单 对 象 。 

【 值 】 复 选 框 : 用 于 设置 该 文本 域 中 是 否 使 用 必 填 文本 域 。 

【可 接受 】 选 项 区 域 : 用 于 设置 文本 域 中 可 填 数 据 的 类 型 ， 可 以 选择 4 种 类 型 。 选 择 【 任 何 东西 】 选 
项 表明 文本 域 中 可 以 输入 任意 类 型 的 数据 ; 选择 【数字 】 选 项 表明 文本 域 中 只 能 输入 数字 数据 ; 选择 【 电 
子 邮件 】 选 项 表明 文本 域 中 只 能 输入 电子 邮件 地 址 ; 选择 【数字 从 】 选 项 可 以 设置 可 输入 数字 值 的 范围 . 
这 时 可 在 右边 的 文本 框 中 从 左 至 右 分 别 输入 最 小 数值 和 最 大 数值 。 


22.5 


按钮 是 网 页 的 重要 组 成 部 分 ， 是 沟通 页 面 的 重要 工具 .本 节 我 们 介绍 如 何 插入 按钮 对 象 ， 按 钮 表单 
对 象 包括 按钮 、 单 选 按钮 、 单 选 按钮 组 、 复 选 框 和 复 选 框 组 等 ， 此 类 表单 对 象 的 功能 主要 是 控制 对 表单 
的 操作 。 
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22.5.1 按钮 对 象 简介 


在 预览 网 页 文档 时 ， 当 输入 完 表 单数 据 后 ， 可 以 单 击 表单 按钮 ， 提交 服务 器 处 理 : 如 果 对 输入 的 数 
据 不 满意 ， 需 要 重新 设置 时 ， 可 以 单 击 表单 按钮 ， 重新 输入 : 还 可 以 通过 表单 按钮 来 完成 其 他 任务 。 复 
选 框 和 单 选 按钮 是 预定 义 选择 对 象 的 表单 对 象 。 可 以 在 一 组 复 选 框 中 选择 多 个 选项 ; 单 选 按钮 也 可 以 组 
成 一 个 组 使 用 ， 提 供 互相 排斥 的 选项 值 ， 在 单 选 按钮 组 内 只 能 选择 一 个 选项 。 


22.5.2 插入 表单 按钮 


表单 按钮 是 标准 的 浏览 器 默认 按钮 样式 ， 它 包含 需要 显示 的 文本 ， 它 包括 “提交 ”和 ，“ 重 置 ”按钮 。 
用 户 在 Dreamweaver 中 选择 【插入 】|【 表 单 】| 【按钮 】 命 令 后 ， 在 打开 的 【输入 标签 辅助 功能 属性 】 对 
话 框 中 单 击 【 和 确定】 按钮， 在 文档 中 创建 一 个 表单 按钮 。 

选中 表单 按钮 对 象 后 ， 用户 可 以 在 打开 的 【属性 】 面 板 中 设置 表单 按钮 的 属性 ， 其 中 主要 选项 的 功 
能 如 下 。 

【按钮 名 称 】 文 本 框 : 用 于 输入 按钮 的 名 称 。 

【 值 】 文 本 框 : 用 于 输入 需要 显示 在 按钮 上 的 文本 。 

【动作 】 选 项 区 域 : 用 于 选择 按钮 的 行为 ， 即 按钮 的 类 型 .包含 三 个 选项 。 其 中 【提交 表单 】 单 选 按 
钮 用 于 将 当前 按钮 设置 为 一 个 提交 类 型 的 按钮 . 单 击 该 按钮 . 可 以 将 表单 内 容 提交 给 服务 器 进行 处 理 ;【 重 
设 表单 】 单 选 按 钮 用 于 将 当前 按钮 设置 为 一 个 复位 类 型 的 按钮 ， 单 击 该 按钮 ， 可 以 将 表单 中 的 所 有 内 容 
都 恢复 为 默认 的 初始 值 :【 无 】 单 选 按 钮 用 于 不 对 当前 按钮 设置 行为 ， 可 以 将 按钮 同一 个 脚本 或 应 用 程序 
相关 联 ， 单 击 按钮 时 ， 自 动 执 行 相应 的 脚本 或 程序 。 

【类 】 下 拉 列 表 框 : 用 于 指定 该 按钮 的 CSS 样式 。 


22.5.3 ”插入 单 选 按钮 


单 选 按钮 提供 相互 排斥 的 选项 值 ， 在 单 选 按钮 组 内 只 能 选择 一 个 选项 。 在 Dreamweaver 中 ， 用 户 选 
择 【 插 入 】|【 表 单 】|【 单 选 按钮 】 命 令 ， 即 可 在 文档 中 创建 一 个 单 选 按钮 。 选 中 单 选 按钮 后 ， 可 以 在 打 
开 的 【属性 】 面 板 中 设置 其 属性 参数 。 

单 选 按钮 的 【属性 】 面 板 中 的 主要 参数 选项 的 功能 说 明 如 下 。 

【 单 选 按钮 】 文 本 框 : 用 于 输入 单 选 按钮 的 名 称 。 系 统 会 自动 将 同一 个 段落 或 同一 个 表格 中 的 所 有 名 
称 相同 的 按钮 定义 为 一 个 组 ， 在 这 个 组 中 访问 者 只 能 选中 其 中 的 一 个 。 

【 选 定 值 】 文 本 框 : 用 于 输入 单 选 按 钮 选中 后 控件 的 值 ， 该 值 可 以 被 提交 到 服务 器 上 ， 以 便 应 用 程序 
处 理 。 

【初始 状态 】 选 项 区 域 : 用 于 设置 单 选 按钮 在 文档 中 的 初始 选中 状态 ， 包 括 【 已 匀 选 】 和 【未 选中 】 
两 项 。 

【类 】〗 下 拉 列 表 框 ， 用 于 指定 该 单 选 按钮 的 CSS 样式 。 


22.5.4 插入 单 选 按钮 组 


使 用 单 选 按钮 组 表单 对 象 可 以 添加 一 个 单 选 按钮 组 .选择 【插入 】〗| 【表单 】|【 单 选 按钮 组 】 命 令 . 
打开 【 单 选 按钮 组 】 对 话 框 ， 然 后 在 该 对 话 框 中 设置 单 选 按钮 组 的 参数 后 . 单 击 【 确 定 】 按 钮 即 可 在 网 
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页 中 插入 单 选 按钮 组 。 

【 单 选 按钮 组 】 对 话 框 中 的 主要 参数 选项 的 功能 说 明 如 下 。 

【名 称 】 文 本 框 : 用 于 指定 单 选 按钮 组 的 名 称 。 

【 单 选 按钮 】 列 表 框 : 该 列表 框 中 显示 的 是 该 单 选 按钮 组 中 所 有 的 按钮 ， 左 边 列 为 按钮 的 【标签 】. 
右边 列 为 按钮 的 值 ， 相 当 于 单 选 按钮 【属性 】 面 板 中 的 【 选 定 值 ]。 

【布局 ， 使 用 】 选 项 区 域 : 用 于 指定 单 选 按钮 间 的 组 织 方式 ， 有 【换行 符 】 和 【表格 】 两 种 选择 。 


22.5.5 插入 复 选 框 


复 选 框 表单 对 象 可 以 限制 访问 者 填写 的 内 容 .使 收集 的 信息 更 加 规范 ， 更 有 利于 信息 的 统计 。 在 
Dreamweaver 中 选择 【插入 】|【 表 单 】|【 复 选 框 】 命 令 ， 即 可 在 网 页 文档 中 创建 复 选 框 。 选 中 页 面 中 的 
复 选 框 ， 可 以 在 【属性 】 面 板 中 设置 其 属性 参数 。 

复 选 框 【 属 性 】 面 板 中 的 主要 参数 选项 的 具体 作用 如 下 。 

【 复 选 框 名 称 】 文 本 框 : 该 文本 框 用 于 输入 复 选 框 的 名 称 。 

【 选 定 值 〗】 文 本 框 : 用 于 输入 复 选 框 选中 后 控件 的 值 ， 该 值 可 以 被 提交 到 服务 器 上 ， 以 便 应 用 程序 
处 理 。 

【初始 状态 】 选 项 区 域 .， 用 于 设置 复 选 框 在 文档 中 的 初始 选中 状态 ， 包 括 【 已 勾 选 】 和 【未 选中 】 
两 项 。 


22.5.6 插入 复 选 框 组 


复 选 框 组 和 按钮 、 单 选 按钮 组 相似 ， 可 以 一 次 插入 多 个 选项 。 在 Dreamweaver 中 选择 【插入 】〗|【 表 
单 】|【 复 选 框 组 】 命 令 ， 打开 【 复 选 框 组 】 对 话 框 ， 然 后 在 该 对 话 框 中 设置 复 选 框 组 参数 后 ， 单 击 【 确 
定 】 按 钮 即 可 在 页 面 中 插入 一 个 复 选 框 组 。 

【 复 选 框 组 】 对 话 框 中 的 主要 参数 选项 的 功能 说 明 如 下 。 

【名 称 】 文 本 框 : 用 于 输入 复 选 框 组 的 名 称 。 

【 复 选 框 】 列 表 框 显示 的 是 该 复 选 框 组 中 所 有 的 按钮 ， 左 边 列 为 复 选 框 的 【标签 】 右边 列 是 复 选 
框 的 值 ， 相 当 于 复 选 框 【 属 性 】 面 板 中 的 【 选 定 值 】。 

【布局 ， 使 用 】 选 项 区 域 : 用 于 指定 复 选 框 间 的 组 织 方式 ， 有 【换行 符 】 和 【表格 】 两 种 选择 。 


22.5.7 插入 图 形 按钮 


在 设计 网 页 时 用户 可 以 使 用 图 像 域 生成 图 形 化 的 按钮 来 美观 网 页 。 在 Dreamweaver 中 选择 【插入 】| 
【表单 】| 【图 像 域 】 命 令 , 打开 【选择 图 像 源 文件 】 对 话 框 ， 选择 一 幅 图 像 并 单 击 【 确 定 】 按 钮 ， 然 后 在 
【辅助 标签 属性 功能 】 对 话 框 中 再 次 单 击 【确定 】 按 钮 ， 即 可 在 网 页 文档 中 插入 一 个 图 形 按钮 。 

选中 页 面 中 的 图 形 按钮 ， 在 打开 的 【属性 】 面 板 中 可 以 设置 其 参数 和 属性 ， 其 中 主要 参数 的 功能 说 
明 如 下 。 

【图 像 区 域 】 文 本 框 : 输入 图 像 域 的 名 称 。 

【 源 文件 】 文 本 框 : 输入 图 像 的 URL 地 址 (或 单 击 其 后 的 【文件 夹 】 按 钮 ) ， 可 选择 图 像 文 件 。 
【替换 】 文 本 框 : 输入 图 像 的 替换 文字 ， 当 浏览 器 不 显示 图 像 时 ,软件 将 显示 该 蔡 换 的 文字 。 
【对 齐 】 下 拉 列 表 框 : 选择 图 像 的 对 齐 方式 。 
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Spry 表单 








表单 中 的 Spry 构件 主要 用 于 验证 用 户 在 对 象 域 中 所 输入 的 内 容 是 否 为 有 效 的 数据 ， 并 在 这 些 对 象 域 
中 内 建 了 CSS 样式 和 JavaScript 特效 ， 更 加 丰富 了 对 象 域 的 显示 效果 。 本 节 主 要 讲述 4 个 方面 的 内 容 . 
主要 包括 Spry 验证 文本 域 、Spry 验证 文本 区 域 、Spry 验证 复 选 框 和 Spry 验证 选择 。 用 户 通过 本 节 的 学 
习 可 以 了 解 Spry 表单 ， 为 后 面 的 网 站 建设 商定 基础 。 


22.6.1 Spry 验证 文本 域 


Spry 验证 文本 域 的 作用 是 验证 用 户 在 文本 字段 中 输入 的 内 容 是 否 符合 要 求 。 通 过 Dreamweaver 打开 
网 页 文档 ， 并 选中 需要 进行 验证 的 文本 域 。 然 后 ， 单 击 【 插 入 】 面 板 中 的 【表单 】| 【Spry 验证 文本 域 】 
按钮 ， 为 文本 域 添加 Spry 验证 。 在 插入 Spry 验证 文本 域 或 为 文本 域 添加 Spry 验证 后 ， 即 可 单 击 蓝 色 的 
Spry 文本 域 边框 ， 然 后 在 【属性 】 面 板 中 设置 Spry 验证 文本 域 的 属性 。 

Spry 验证 文本 域 有 多 种 属性 可 以 设置 ,包括 设置 其 状态 、 验 证 的 事件 等 。 在 【属性 】 面 板 中 定义 任 
意 一 个 Spry 属性 ， 在 【预览 状态 】 的 下 拉 菜 单 中 都 会 增加 相应 的 状态 类 型 。 选 中 【预览 状态 】 菜 单 中 的 
相应 类 型 后 , 即 可 设置 该 类 型 状态 时 网 页 显示 的 内 容 和 样式 。 例 如 , 定义 最 小 字符 数 为 8, 则 【预览 状态 】 
的 菜单 中 将 新 增 “ 未 达到 最 小 字符 数 ”的 状态 .选中 该 状态 后 ， 即 可 在 【设计 视图 】 中 修改 该 状态 。 


22.6.2 ”Spry 验证 文本 区 域 


Spry 验证 文本 区 域 也 是 一 种 Spry 验证 内 容 , 其 主要 用 于 验证 文本 区 域内 容 . 以 及 读 取 一 些 简单 的 属 
性 。 在 Dreamweaver 中 ， 可 直接 单 击 【 插 入 】 面 板 中 的 【表单 】| 【Spry 验证 文本 区 域 】 按 钮 ， 创 建 Spry 
验证 文本 区 域 。 若 网 页 文档 中 已 插入 了 文本 区 域 ， 则 用 户 可 选中 已 创建 的 普通 文本 区 域 ， 用 同样 的 方法 
为 表单 对 象 添加 Spry 验证 方式 。 

在 【设计 视图 】 中 选择 蓝 色 的 Spry 文本 区 域 后 ， 即 可 在 【属性 】 面 板 中 定义 Spry 验证 文本 区 域 的 





















































内 容 。 
Spry 验证 文本 区 域 的 【属性 】 面 板 中 ， 比 Spry 验证 文本 域 增加 了 两 个 选项 。 
1. 计数 器 

计数 器 是 一 个 单 选 按钮 组 ， 提 供 了 三 种 选项 供用 户 选 择 。 当 选择 【无 】 时 ， 将 不 在 Spry 验证 结果 的 
区 域 显示 任何 内 容 ， 当 选择 【字符 计数 】 时 ， 则 Dreamweaver 会 为 Spry 验证 区 域 添加 一 个 字符 技术 的 肢 
本 ,显示 文本 区 域 中 已 输入 的 字符 数 ， 当 设置 了 最 大 字符 数 之 后 , Dreamweaver 将 允许 用 户 选 择 【 其 余 字 
符 】 选 项 ， 以 显示 文本 区 域 中 还 允许 输入 多 少 字符 。 
2. 禁止 额外 字符 

若 已 设置 最 大 字符 数 ， 则 可 选择 【禁止 额外 字符 】 复 选 框 ， 其 作用 是 防止 用 户 在 文本 区 域 中 输入 的 
文本 超过 最 大 字符 数 。 当 选择 该 复 选 框 后 ， 若 用 户 输入 的 文本 超过 最 大 字符 数 ， 则 无 法 再 向 文本 区 域 中 
输入 新 的 字符 。 

Spry 验证 密码 用 于 密码 类 型 文本 域 ， 在 Dreamweaver 中 使 用 Spry 验证 密码 功能 。 

Spry 验证 密码 的 【属性 】 面 板 中 的 主要 参数 选项 的 功能 说 明 如 下 。 




















【最 小 字符 数 】 文 本 框 : 设置 密码 文本 域 输入 的 最 小 字符 数 。 
【最 大 字符 数 】 文 本 框 : 设置 密码 文本 域 输入 的 最 大 字符 数 。 
【最 小 字母 数 】 文 本 框 : 设置 密码 文本 域 输入 的 最 小 起 始 字母 。 
【最 大 字母 数 】 文 本 框 : 设置 密码 文本 域 输入 的 最 大 结束 字母 。 


22.6.3 ”Spry 验证 复 选 框 


Spry 验证 复 选 框 的 作用 是 在 用 户 选择 复 选 框 时 显示 选择 的 状态 。 与 之 前 几 种 Spry 验证 表单 不 同 . 
Dreamweaver 不 允许 用 户 为 已 添加 的 复 选 框 添加 Spry 验证 ， 只 人 允许 用 户 直 接 添 加 Spry 复 选 框 。 

用 Dreamweaver 打开 网 页 文档 ,然后 单 击 【 插 入 】 面 板 中 的 【表单 】| 【Spry 验证 复 选 框 】 按 钮 ， 打 
开 【 输 入 标签 辅助 功能 属性 】 对 话 框 ， 在 该 对 话 框 中 简单 设置 ， 然 后 单 击 【 确 定 】 按 钮 添加 复 选 框 。 用 
户 可 单 击 复 选 框 上 方 的 蓝 色 【Spry 复 选 框 】 标 记 . 然后 在 【属性 】 面 板 中 定义 Spry 验证 复 选 框 的 属性 。 

Spry 复 选 框 有 两 种 设置 方式 .一 种 是 作为 单个 复 选 框 而 应 用 的 【必需 】 选 项 ， 另 一 种 则 是 作为 多 个 
复 选 框 ( 复 选 框 组 ) 而 应 用 的 【实施 范围 】 选 项 。 当 用 户 选择 【实施 范围 】 选 项 后 ,将 可 定义 Spry 验证 
复 选 框 的 最 小 选择 数 和 最 大 选择 数 等 属性 。 

在 设置 了 最 小 选择 数 和 最 大 选择 数 后 ， 预 览 状态 的 列表 中 会 增加 未 达到 最 小 选择 数 和 已 超过 最 大 选 
择 数 等 项 目 。 选 择 相应 的 项 目 ， 即 可 对 Spry 复 选 框 的 返回 信息 进行 修改 。 


22.6.4 Spry 验证 选择 


Spry 验证 选择 的 作用 是 验证 列表 /菜单 和 跳 转 菜单 的 值 ， 并 根据 值 显示 指定 的 文本 或 图 像 内 容 。 在 
Dreamweaver 中 ， 单 击 【 插 入 】 面 板 中 的 【表单 】| 【Spry 验证 选择 】 按 钮 ， 即 可 为 网 页 文档 插入 Spry 验 
证 选择 。 选 中 Spry 选择 的 标记 ， 即 可 在 【属性 】 面 板 中 编辑 Spry 验证 选择 的 属性 。 

在 Spry 验证 选择 的 【属性 】 面 板 中 ， 人 允许 用 户 设置 Spry 验证 选择 中 不 允许 出 现 的 选择 项 以 及 验证 选 
择 的 事件 类 型 等 属性 。 


22. 


本 章 概要 性 地 介绍 表单 在 网 站 建设 中 的 应 用 ， 主 要 内 容 有 教育 网 站 类 别 、 教 育 类 网 站 设计 特点 、 教 
育 类 网 站 模式 、 表 单 及 表单 对 象 、 插 入 按钮 对 象 、Spry 表单 ， 为 本 书后 续 的 学 习 打 下 坚实 的 基础 。 主 要 
讲述 如 何在 网 站 建设 中 应 用 表单 ， 制作 吸 引 人 的 网 站 的 一 些 方法 和 相关 技术 ， 接 下 来 我 们 通过 两 个 实例 
来 对 本 章 的 内 容 进 行 实践 。 
22.7.1 实战 : 制作 信息 反馈 页 面 

在 网 站 中 ， 用 户 通 过 信息 反馈 页 ， 可 以 将 自己 的 意见 、 建 议 等 信息 提交 到 网 站 的 数据 库 中 ， 而 网 站 
的 管理 员 或 所 有 者 . 则 可 以 通过 网 站 后 全 等 其 他 途径 查看 这 些 信 息 . 以 方便 管理 员 或 所 有 者 与 用 户 之 间 


的 交流 。 以 华 康 中 学 网 站 为 例 ， 制作 一 个 意见 箱 页 面 . 主要 练习 添加 表格 、 设 置 表格 属性 、 添 加 表单 、 
设置 表单 属性 和 添加 Flash， 如 图 22-16 所 示 。 
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图 22-16 制作 信息 反馈 页 面 


STEP|01 在 Flash 软件 中 ， 制作 网 站 的 版 首 ， 包 括 导 航 条 、 快 速 链接 和 banner。 在 站 点 根 目 录 下 ， 新 建 


feedback.html 页 面 。 在 文档 中 插入 一 个 宽度 为 907 像素 的 1 行 x 1 列 的 表格 , 并 设置 居中 对 齐 方式 ,如 图 
22-17 所 示 。 
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图 22-17 【属性 】〗】 面 板 


STEP|02 将 光标 置 于 该 表格 中 ， 插 入 制作 好 的 Flash 版 首 。 在 表格 的 下 面 插入 一 个 1 行 x2 列表 格 ， 并 
在 第 1 列 单元 格 中 插入 背景 图 像 ， 该 表格 为 网 页 的 正文 部 分 ， 如 图 22-18 和 图 22-19 所 示 。 
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图 22-18 【属性 】〗 面 板 
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图 22-19 【属性 】 面 板 


STEP|03 在 第 1 列 单元 格 中 插入 一 个 5 行 x1 列表 格 . 宽 为 100， 并 在 各 个 单元 格 中 插入 图 像 ， 该 表格 
为 “站 内 导航 "， 如 图 22-20 所 示 。 
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图 22-20 5 行 X1 列表 格 





STEP|04 在 表格 的 第 2 列 单元 格 中 , 插入 一 个 3 行 x3 列表 格 .【 宽 】 为 627， 并 在 前 两 行 单元 格 中 插入 
素材 图 像 。 在 第 3 行 单元 格 中 . 插入 一 个 3 行 x1 列 的 谋 套 表格 . 该 谋 套 表格 为 信息 反馈 界面 。 将 光标 置 
于 第 1 行 单元 格 中 ,插入 一 个 红色 的 表单 区 域 ， 如 图 22-21 所 示 。 
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图 22-21 【属性 】 面 板 


STEP|05 在 表单 区 域内 插入 一 个 6 行 x3 列 的 表格 ,并 在 单元 格 中 输入 文字 。 在 第 2 行 第 2 列 单元 格 中 
插入 一 个 文本 字段 ， 并 设置 其 名 称 为 nicheng。 在 第 3、4 行 第 2 列 单元 格 中 分 别 插入 文本 字段 ， 并 设置 
名 称 为 youjian、biaoti。 在 第 3 行 第 3 列 单元 格 中 插入 一 个 复 选 框 ， 并 设置 其 名 称 为 gongkai。 在 第 5 行 
第 2 列 单元 格 中 插入 一 个 文本 区 域 ， 并 设置 其 名 称 为 iuyan， 如 图 22-22 所 示 。 





贵 意见 是 对 我 们 的 最 有 力 的 支持 . 





图 22-22 页 面 效果 





STEP|06 在 第 6 行 单元 格 中 插入 【提交 】 按 钮 和 【 重 置 】 按 钮 ， 并 在 表格 的 第 3 行 单元 格 中 插入 素材 图 
像 。 在 文档 的 最 底部 插入 一 个 2 行 x2 列表 格 . 插入 文字 及 图 像 . 该 表格 为 网 页 的 版 尾 。 在 同一 目录 下 创 
建 back.html 页 面 ， 该 页 面 与 feedbackhtml 页 面 结构 相同 ， 只 是 正文 部 分 更 换 为 文字 ， 如 图 22-23 所 示 。 
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图 22-23 页 面 效果 


22.7.2 实战: 设计 华 康 中 学 主页 


本 例 制作 的 华 康 中 学 主页 以 白 、 蓝 为 主要 色调 ,表现 出 一 种 智慧 、 科 技 、 真 诚 的 感觉 ， 符 合 学 校 的 
理念 和 宗旨 。 网 页 采用 大 幅面 的 Flash 版 首 ， 将 导航 条 、 快 速 链接 和 banner 组 合 在 一 起 ， 正 文中 包括 政 


策 通 知 、 校 内 新 闻 、 成 绩 查询 等 相关 栏目 。 主 要 练习 添加 表格 、 设 置 表格 属性 、 添 加 表单 、 设 置 表单 属 
性 和 添加 Flash， 如 图 22-24 所 示 。 
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图 22-24 设计 华 康 中 学 主页 
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六 








STEP|01 在 网 站 根 目录 中 .创建 index.html 页 面 。 然 后 .在 文档 中 设置 页 面 的 【上 边 距 】 和 【左边 距 】 
均 为 0 像素 ， 如 图 22-25 所 示 。 
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图 22-25 【页 面 属性 〗 对 话 框 








STEP|02 在 文档 中 插入 一 个 宽度 为 907 像素 的 1 行 x1 列 的 表格 ， 并 设置 该 表格 居中 对 齐 。 将 光标 置 于 
该 表格 ， 然 后 插入 制作 好 的 Flash 版 首 ， 如 图 22-26 所 示 。 
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图 22-26 【属性 】 面 板 


STEPI03 在 表格 的 下 面 再 创建 一 个 宽度 为 907 像素 的 表格 . 并 设置 第 1 列 单元 的 宽度 为 185 像素 。 在 表 
格 的 第 1 列 单元 格 中 插入 一 个 宽度 为 100% 的 3 行 x 1 列 的 谋 套 表格 ， 并 设置 该 表格 顶端 对 齐 。 在 该 赔 套 
表格 的 第 1 行 第 1 列 单元 格 中 , 插入 一 个 宽度 为 100% 的 3 行 x2 列 的 表格 , 并 在 各 
个 单元 格 中 插入 背景 图 像 。 在 表格 的 单元 格 中 插入 文字 及 文本 字段 、 按 钮 等 表单 元 
素 ， 以 构成 一 个 师 生 登录 界面 .如 图 22-27 所 示 。 

STEP|04 在 父 表格 的 第 3 行 单元 格 中 插入 一 个 4 行 x1 列 的 凡 套 表格 ， 并 在 各 个 “| 
单元 格 中 插入 素材 图 像 。 在 表格 的 第 2 列 单元 格 中 插入 一 个 宽度 为 100% 的 1 行 x4 a 
列表 格 ， 并 在 第 1 列 单元 格 中 插入 5 行 x 1 列 的 谋 套 表格 。 在 表格 的 第 1 行 单元 格 

中 插入 2 行 x1 列 的 表格 ， 并 在 单元 格 中 插入 文字 及 图 像 ， 该 表格 为 “政策 通知 ”栏目 。 在 表格 的 第 3 
行 单元 格 中 插入 一 个 2 行 x 1 列 的 表格 ,并 在 单元 格 中 插入 文字 及 图 像 ， 该 表格 为 “网 络 校园 ”栏目 。 在 
表格 的 第 5 行 单元 格 中 插入 一 个 2 行 x1 列 的 表格 . 并 在 单元 格 中 插入 文字 及 图 像 , 该 表格 为 “校内 新 闻 ” 
栏目 ， 如 图 22-28 所 示 。 
STEP|05 在 表格 的 第 3 列 单元 格 中 插入 一 个 2 行 x1 列 的 表格 .然后 在 1 行 单元 格 中 插入 3 行 x1 列 的 
嵌 套 表格 ,该 表格 为 “成 绩 查询 ”栏目 。 在 下 面 的 单元 格 中 插入 一 个 3 行 x2 列 的 说 套 表格 ,并 在 各 个 单 
元 格 中 插入 图 像 ， 该 表格 为 “快速 链接 ”栏目 。 在 文档 的 最 底部 创建 一 个 2 行 x2 列 的 表格 .并 设置 居中 
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对 齐 ， 然 后 插入 文字 及 图 像 。 选 择 意见 箱 图 像 ， 在 【属性 】 面 板 中 设置 【链接 】 地 址 为 feedback html 页 
面 ， 如 图 22-29 所 示 。 












[2008/7/1] 我 校 高 中 部 2008 年 度 招生 简章 
[2008/7/1] 我 校 初中 部 2008 年 度 招生 简章 
，[2008/6/29] 关 于 高 中 部 录取 分 数 线 的 解释 
。[200876729] 我 校 2008 年 署 假 放假 通知 





站 ， 得 成 绩 ， 
玉 及 学 生 就 近 分 配 情况 。 分 配 至 我 校 的 学 生 可 在 网 
小 校园 进行 学 秆 验证 ， 通 过 学 穆 验 证 后 即 可 携带 通 
知 书 、 户口 本 与 学 杂费 380 元 整 ， 于 2008 年 8 月 















“ [2008/6/27] 今 年 我 市 中 招 杖 元 出 自我 校 ， 被 我 部 录取 
“ [2008/6/26] 我 校 初中 部 08 届 毕业 生 离 校 ， 师 生 挥 泪 惜别 
* [2008/6/20] 我 校 高 中 部 返 校 填报 志愿 
. [2008/6/20] 今 年 我 核 高招 成 绩 有 望 突破 去 年 名 





图 22-28 页 面 效 果 图 22-29 页 面 效 果 
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本 嫌 织 镶 。 爱 文 化 友 展 有限 全 司 


行为 是 使 用 JavaScript 程序 预定 义 的 页 面 特效 工具 ， 是 JavaScript 在 Dreamweaver 中 内 建 的 程序 库 。 
利用 行为 ， 用 户 可 以 制作 出 各 式 各 样 的 网 页 特殊 效果 ， 例 如 播放 声音 、 弹 出 菜单 等 。 表 单 是 制作 交互 式 
网 页 的 基本 元 素 ， 通 过 在 网 页 中 插入 各 类 表单 元 素 ， 设 计 者 可 以 制作 出 例如 注册 、 登 录 、 问 答 等 网 页 
文档 。 

本 章 共 讲述 4 部 分 的 内 容 ， 主 要 介绍 娱乐 类 网 站 概述 、 娱 乐 网 站 色彩 、 使 用 行为 、 设 置 文本 和 图 像 
以 及 综合 实战 。 通 过 本 章 的 学 习 我 们 可 以 为 后 期 的 网 站 建设 商定 基础 。 





446 








:网 页 设计 与 网 站 建设 自学 经 典 


经 典 














从 狭义 的 范围 讲 . 娱乐 就 是 娱乐 圈 中 的 人 、 事 、 物 :从 广义 的 范围 来 说 ,娱乐 可 被 看 作 是 一 种 活动 . 
一 种 通过 表现 喜 怒 亡 乐 ， 或 特殊 的 技巧 而 被 人 们 喜爱 ， 并 带 有 一 定 启发 性 的 活动 。 它 包含 了 悲 喜剧 、 各 
种 比赛 和 游戏 、 音 乐舞 蹈 表演 和 欣赏 等 。 本 节 主 要 讲述 娱乐 类 网 站 概述 ， 内 容 主要 包括 影视 娱乐 网 站 、 
音乐 娱乐 网 站 、 体 育 娱乐 网 站 、 游 戏 娱乐 网 站 和 卡通 娱乐 网 站 。 用 户 通 过 本 节 的 学 习 可 以 了 解 娱乐 类 网 
站 ， 为 后 面 的 网 站 建设 奠定 基础 。 


23.1.1 影视 娱乐 网 站 
影视 网 站 ， 最 重要 的 就 是 要 有 很 强 的 视觉 性 和 娱乐 性 。 以 广告 为 目的 的 影视 网 站 要 唤起 用 户 对 影视 
最 大 程度 的 关心 ， 提 供 最 能 引起 用 户 兴 趣 的 信息 .给 人 留 下 深刻 的 印象 是 最 重要 的 。 在 影视 广告 网 站 


使 用 使 人 感 兴趣 的 图 像 是 必须 的 。 很 多 的 影视 广告 网 站 利用 Flash 和 影视 片段 等 各 种 方法 . 富有 趣味 地 提 
供 关 于 影视 的 信息 ， 如 图 23-1 所 示 。 



































图 23-1 影视 娱乐 网 站 


23.1.2 ”音乐 娱乐 网 站 


在 音乐 网 站 ， 没 有 什么 特别 的 表现 禁忌 ， 但 也 不 能 过 分 追求 自由 和 个 性 ， 以 至 于 失去 了 均衡 感 和 使 
用 的 便利 性 ， 还 要 考虑 配色 和 布局 ， 为 了 整体 的 高 水 准 而 努力 。 

使 用 看 起 来 舒服 的 方法 安排 文本 与 图 像 ， 充 分 地 使 用 余 白 比较 好 。 但 为 了 避免 出 现 过 于 直 白 、 无 趣 
的 情况 ， 应 该 灵活 运用 图 片 来 构成 简练 的 页 面 ， 如 图 23-2 所 示 。 
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图 23-2 音乐 娱乐 网 站 


23.1.3 体育 娱乐 网 站 


体育 网 站 大 部 分 都 通过 照片 带 给 我 们 运动 的 健康 感 和 趣味 感 ， 并 以 此 为 基础 尽力 把 网 页 界面 制作 得 
充满 朝气 和 活力 。 体 育 网 站 在 注重 视觉 效果 的 同时 ， 还 应 通过 不 易 混淆 的 网 页 界面 ， 把 选手 或 职业 队 所 
追求 的 个 性 十 足 的 特点 创造 性 地 表现 出 来 。 

在 很 多 情况 下 ， 体 育 网 站 的 配色 都 利用 蓝 色 、 绿 色 等 色彩 给 人 轻快 的 感觉 ， 或 利用 黄色 、 朱 黄色 等 
色彩 来 强调 活动 性 。 另 外 ， 为 了 营造 紧张 感 或 衬托 专业 图 片 ， 使 用 黑色 或 深 藏 青色 来 配色 .如 图 23-3 
所 示 。 
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图 23-3 体育 娱乐 网 站 
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23.1.4 ”游戏 娱乐 网 站 和 卡通 娱乐 网 站 


游戏 是 体育 运动 的 一 类 ， 除 了 现实 生活 中 的 游戏 外 .最 为 流行 的 还 是 网 络 游戏 。 游 戏 的 开发 商 为 了 
吸引 更 多 的 玩家 .会 以 该 游戏 的 界面 为 主题 建立 网 站 ， 将 游戏 中 的 场景 、 通 关 秘 籍 或 者 游戏 攻略 放置 
其 中 。 

当然 ,并 不 是 所 有 的 游戏 都 会 建立 一 个 相关 的 网 站 。 更 多 的 还 是 以 游戏 开发 商 为 主题 ， 建 立 一 个 以 
宣传 该 开发 商 开发 的 所 有 游戏 为 目的 的 网 站 。 如 图 23-4 所 示 为 某 游戏 开发 商 的 游戏 网 站 ， 其 中 展示 了 该 
开发 商 设计 的 所 有 游戏 。 


























图 23-4 游戏 娱乐 网 站 


多 媒体 、 卡 通 网 站 一 般 来 说 娱乐 的 要 素 很 多 .追求 的 是 生机 勃勃 和 明朗 的 现代 设计 。 一 般 常 运用 视 
觉 化 、 快 乐 的 色彩 ， 追 求 能 够 营造 强烈 愉快 感 的 设计 。 


y 吕 才 虱 娱乐 网 站 色彩 


由 于 娱乐 行业 的 特殊 性 ， 其 网 站 的 布局 与 配色 都 较为 活泼 。 但 是 色彩 对 人 的 头脑 和 精神 的 影响 力 ， 
是 客观 存在 的 ， 所 以 色彩 的 知觉 力 、 色 彩 的 辨别 力 、 色 彩 的 象征 力 与 感情 .这 些 都 是 色彩 心理 学 上 的 重 
要 问题 ,在 设计 娱乐 类 网 站 时 需要 格外 注意 。 本 节 主 要 讲述 娱乐 网 站 色彩 ,内 容 主要 包括 网 站 色相 情感 、 
网 站 色调 联想 和 网 站 色彩 知觉 。 用 户 通 过 本 节 的 学 习 可 以 了 解 娱乐 网 站 色彩 .为 后 面 的 网 站 建设 奠定 基础 。 


23.2.1 色相 情感 


不 同 的 颜色 会 给 浏览 者 不 同 的 心理 感受 . 但 是 同一 种 颜色 通常 不 只 含有 一 个 象征 意义 。 每 种 色彩 在 
饱和 度 、 透 明度 上 略微 变化 就 会 产生 不 同 的 感觉 。 能 够 以 色相 称呼 的 色 系 有 7 种 . 分 别 是 红色 系 、 禁 色 
系 、 黄 色 系 、 绿 色 系 、 青 色 系 、 蓝 色 系 、 紫 色 系 。 

在 整个 人 类 的 发 展 历史 中 .红色 始终 代表 着 一 种 特殊 的 力量 与 权势 。 在 很 多 宗教 仪式 中 会 经 常 使 用 
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鲜明 的 红色 .在 我 国 红色 一 直 都 是 象征 着 吉祥 幸福 的 代表 性 颜色 。 同 时 鲜血、 火焰 、 危 险 、 战 争 、 狂 
热 等 极端 的 感觉 都 可 以 与 红色 联系 在 一 起 。 

用 红色 为 主 色 的 网 站 不 多 .在 大 量 信息 的 页 面 中 有 大 面积 的 红色 .不 易于 阅读 。 但 是 如 果 拱 配 好 的 
话 ， 可 以 起 到 振奋 人 心 的 作用 。 最 近 几 年 ,网 络 上 以 红色 为 主 色 的 网 站 越 来 越 多 。 

在 东方 文化 中 ,橙色 象征 着 爱情 和 幸福 。 充 满 活力 的 橙色 会 给 人 健康 的 感觉 ， 且 有 人 说 橙色 可 以 提 
高 厌食 症 患者 的 食欲 。 有 些 国家 的 僧侣 主要 穿着 橙色 的 僧侣 服 . 他 们 解释 说 橙色 代表 着 谦 还 。 橙 色 通 常 
会 给 人 一 种 朝气 活 泌 的 感觉 ， 它 通常 可 以 使 原本 抑郁 的 心情 容 然 开朗 。 

在 很 多 艺术 家 的 作品 中 ,黄色 都 用 来 表现 喜庆 的 气氛 和 富 侥 的 景色 。 同 时 黄色 还 可 以 起 到 强调 突出 
的 作用 ， 这 也 是 使 用 黄色 作为 路 口 指 示 灯 的 原因 。 黄 色 因为 具有 诸多 以 上 的 特点 ， 所 以 在 我 们 的 日 常生 
活 中 随处 可 见 。 

绿色 与 人 类 息息相关 .是 永恒 的 自然 之 色 . 代表 了 生命 与 希望 .也 充满 了 青春 活力 ， 绿 色 象 征 着 和 
平 与 安全 、 发 展 与 生机 、 和 舒适 与 安宁 、 松 弛 与 休息 ， 有 缓解 眼 部 疲劳 的 作用 。 当 需要 揭 开 心中 的 抑郁 时 
当 需 要 找 回 安详 与 宁静 的 感觉 时 ， 回 归 大 自然 是 最 好 的 方法 。 

绿色 也 是 在 网 页 中 使 用 最 为 广泛 的 颜色 之 一 。 因 为 它 本 身 具有 一 定 的 与 健康 相关 的 感觉 ， 所 以 也 经 
常用 于 与 健康 相关 的 站 点 。 绿 色 还 经 常用 于 一 些 公司 的 公关 站 点 或 教育 站 点 。 

蓝 色 会 使 人 自然 地 联想 起 大 海 和 天 空 ， 所 以 也 会 使 人 产生 一 种 爽朗 、 开 阔 、 清 凉 的 感觉 。 作 为 冷色 
的 代表 颜色 ， 蓝 色 会 给 人 很 强烈 的 安稳 感 ， 同 时 蓝 色 还 能 够 表现 出 和 平 、 淡 雅 、 洁 净 、 可 靠 等 多 种 感觉 。 
低 彩 度 的 蓝 色 主要 用 于 营造 安稳 、 可 靠 的 氛围 ， 而 高 彩 度 的 蓝 色 可 以 营造 出 高 贵 、 严 肃 的 氛围 。 蓝 色 与 
绿色 、 白 色 的 措 配 在 我 们 的 现实 生活 中 也 是 随处 可 见 的 ， 它 的 应 用 范围 几乎 覆盖 了 整个 地 球 。 

很 多 站 点 都 在 使 用 蓝 色 与 青绿 色 的 措 配 效果 。 最 具 代 表 性 的 蓝 色 物 体 莫 过 于 海水 和 蓝天 ， 而 这 两 种 
物体 都 会 让 人 有 一 种 清凉 的 感觉 。 和 白色 混合 ， 能 体现 淡雅 辽阔、 浪漫 的 气氛 ( 像 天 空 的 色彩 )， 给 人 
以 想象 的 空间 。 

紫色 是 一 种 在 自然 界 中 比较 少见 的 颜色 ,象征 着 女性 化 ， 也 象征 着 神秘 与 庄重 、 神 圣 和 浪漫 。 它 代 
表 着 高 贵 和 奢华 、 优 雅 与 魅力 。 另 一 方面 ， 它 又 有 孤独 等 意味 。 紫 色 结合 红色 产生 的 紫红 色 是 非常 女性 
化 的 颜色 ， 它 给 人 的 感觉 通常 都 是 浪漫 、 和 柔和、 华丽、 高 贵 优雅 .特别 是 粉红 色 可 以 说 是 女性 化 的 代表 
颜色 。 

黑白 灰 是 最 基本 和 最 简单 的 搭配 ， 白 字 黑 底 、 黑 字 白 底 都 非常 清晰 明了 。 黑 白灰 色彩 是 万 能 色 ， 可 
以 跟 任意 一 种 色彩 搭配 ， 也 可 以 帮助 两 种 对 立 色彩 和 谐 过 渡 。 为 某 种 色彩 的 搭配 苦恼 的 时 候 ， 不 防 试 试 
用 黑白 灰 。 和 白色 给 人 以 洁白 、 明 快 、 纯 真 、 清 洁 的 感受 ， 以 白色 作为 背景 ， 可 以 使 色彩 较 重 的 绿色 产品 
在 页 面 中 尤其 显眼 ， 突 出 主题 。 蓝 色 的 点 级 . 减少 了 非 色调 白色 产生 的 单调 感觉 。 

黑色 具有 深沉 、 神 秘 、 寂 静 、 悲 京 、 压 抑 的 感受 。 黑 色 和 白色 .它们 在 不 同时 候 给 人 的 感觉 是 不 同 
的 , 黑色 有 时 给 人 沉默 、 虚 空 的 感觉 ,但 有 时 也 给 人 一 种 庄严 肃穆 的 感觉 。 白 色 也 是 同样 ， 有 时 给 人 无 
尽 希 望 的 感觉 ,但 有 时 也 给 人 一 种 恐惧 和 悲哀 的 感受 。 具 体 还 要 看 与 其 搭配 的 色彩 。 

灰色 是 永久 受 欢迎 的 色彩 ,灰色 的 使 用 方法 如 同 单 色 一 样 , 通过 调整 透明 度 的 方法 来 产生 灰 度 层次 
使 页 面 效果 素雅 统一 。 灰 色 具 有 中 庸 、 平 凡 、 温 和 、 谦 让 、 中 立 和 高 雅 的 感觉 。 


23.2.2 色调 联想 
色彩 本 身 是 无 任何 含义 的 . 联想 产生 含义 . 色彩 在 联想 中 影响 人 的 心理 、 左 右 人 的 情绪 .不同 的 色 
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彩 联想 给 各 种 色彩 都 赋予 了 特定 的 含义 。 这 就 要 求 设计 人 员 在 用 色 时 不 仅 是 单单 地 运用 ， 还 要 考虑 诸多 
因素 ， 如 浏览 者 的 社会 背景 、 类 别 、 年 龄 、 职 
业 等 社会 背景 不 同 的 群体 ， 浏 览 网 站 的 目的 也 
不 同 ， 而 彩色 给 他 们 的 感受 也 不 同 ， 同 时 带 给 
客户 的 利益 多 少 也 不 同 ， 也 就 是 说 要 认真 分 析 
网 站 的 受众 群体 ， 多 听取 反馈 信息 .进行 总 结 
与 调整 。 

例如 紫色 透露 着 诡异 的 气息 ， 所 以 能 制造 
奇幻 的 效果 。 各 种 彩 度 和 亮度 的 紫色 ,如果 措 
配 它 真正 的 补 色 一 一 黄色 ， 更 能 展现 怪诞 、 诡 
异 的 感觉 ， 如 图 23-5 所 示 。 图 23-5 紫色 联想 


23.2.3 ”色彩 知觉 


颜色 的 搭配 可 以 流露 设计 者 的 心情 和 喜好 .同时 也 会 影响 到 浏览 者 。 作 为 一 名 设计 者 ,首先 要 考虑 
的 是 在 一 幅 作品 当中 所 要 传递 的 信息 . 这 是 设计 者 的 目的 所 在 ， 也 是 相当 重要 的 。 在 作品 里 面 还 要 考虑 
到 表面 与 实质 的 联系 ， 即 能 够 使 读者 遐想 到 什么 。 为 此 在 网 页 色彩 的 联系 搭配 上 ， 设计 者 应 该 考虑 到 色 
彩 的 象征 意义 。 例 如 ， 嫩 绿色 、 翠 绿色 、 金 黄色 、 灰 褐色 就 可 以 分 别 象征 着 春 、 夏 、 秋 、 冬 ， 充 分 运用 
色彩 的 这 些 特性 ， 可 以 使 主页 具有 深刻 的 艺术 内 涵 ， 从 而 提升 主页 的 文化 品位 。 
在 色彩 的 运用 上 ， 可 以 采用 不 同 的 主 色调 ， 因 为 色彩 具有 象征 性 。 
(1) 暖色 调 ， 即 红色 、 橙 色 、 黄 色 、 灰色 等 色彩 的 搭配 ， 可 使 主页 呈现 温馨 、 和 网、 热情 的 氛围 。 
如 图 23-6 所 示 为 以 橙色 调 为 主 的 卡通 游戏 网 站 首页 。 
























































图 23-6 色彩 知觉 


(2) 冷色 调 ， 即 青色 、 绿 色 、 紫 色 等 色彩 的 搭配 ， 可 使 主页 呈现 宁静 、 清凉、 清 严 的 氛围 。 
(3) 对 比 色调 . 即 把 色 性 完全 相反 的 色彩 搭配 在 同一 个 空间 里 。 
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靶 下 站 使 用 行为 


行为 是 Dreamweaver 中 非常 有 特色 的 功能 . 可 以 不 编写 JavaScript 代码 即 可 实现 多 种 动态 页 面 效 果 . 
例如 交换 图 像 、 弹 出 提示 信息 、 设 置 导航 栏 图 像 等 。 下 面 将 主要 介绍 在 网 页 中 使 用 行为 的 相关 知识 。 


23.3.1 行为 的 基础 知识 


行为 是 指 在 网 页 中 进行 的 一 系列 动作 ， 通 过 这 些 动作 ， 可 以 实现 用 户 同 网 页 的 交互 ， 也 可 以 通过 动 
作 使 某 个 任务 被 执行 。 在 Dreamweaver 中 ， 行为 由 事件 和 动作 两 个 基本 元 素 组 成 。 通 常 动 作 是 一 段 
JavaScript 代码 ， 利 用 这 些 代码 可 以 完成 相应 的 任务 ， 事件 则 由 浏览 器 定义 ， 可 以 被 附加 到 各 种 页 面 元 素 
上 ,也 可 以 被 附加 到 HTML 标记 中 ， 并 且 一 个 事件 总 是 针对 页 面 元 素 或 标记 而 言 的 。 

1. 行为 的 概念 

行为 是 Dreamweaver 中 一 个 重要 的 部 分 ， 通 过 行为 ， 可 以 方便 地 制作 出 许多 网 页 效果 ， 极 大 地 提高 
了 工作 效率 。 行 为 由 两 个 部 分 组 成 ， 即 事件 和 动作 ， 通 过 事件 的 响应 进而 执行 对 应 的 动作 。 

在 网 页 中 ， 事 件 是 浏览 器 生成 的 消息 ， 表明 该 页 的 访问 者 执行 了 某 种 操作 。 例 如 ， 当 访问 者 将 鼠标 
指针 移动 到 某 个 链接 上 时 ， 浏 览 器 为 该 链接 生成 一 个 onMouseOver 事件 。 不 同 的 页 元 素 定义 了 不 同 的 事 
件 。 在 大 多 数 浏 览 器 中 . onMouseOver 和 onClick 是 与 链接 关联 的 事件 , 而 onLoad 是 与 图 像 和 文档 的 body 
部 分 关联 的 事件 。 

2. 事件 的 分 类 

Dreamweaver 中 的 行为 事件 可 以 分 为 鼠标 事件 、 键 盘 事 件 、 表 单 事件 和 页 面 事件 。 每 个 事件 都 含有 
不 同 的 触发 方式 ， 具 体 如 下 。 

onClick: 单 击 选 定 元 素 (如 超 链接 、 图 片 、 按 钮 等 ) 将 触发 该 事件 。 

onDblClick， 双 击 选 定 元 素 将 触发 该 事件 。 

onMouseDown: 当 按 下 鼠标 按钮 (不 必 释放 鼠标 按钮 ) 时 触发 该 事件 。 

onMouseMove: 当 鼠 标 指针 停留 在 对 象 边界 内 时 触发 该 事件 。 

onMouseOut， 当 鼠标 指针 离开 对 象 边界 时 触发 该 事件 。 

onMouseOver: 当 鼠 标 首次 移动 指向 特定 对 象 时 触发 该 事件 。 该 事件 通常 用 于 链接 。 

onMouseUp: 当 按 下 的 鼠标 按钮 被 释放 时 触发 该 事件 。 


23.3.2 ”使 用 Dreamweaver 内 置 行为 


在 【行为 】 面 板 中 可 以 将 Dreamweaver 内 置 的 行为 附加 到 页 面 元 素 ， 并 且 可 以 修改 以 前 所 附加 行为 
的 参数 。 选 择 【窗口 】|【 行 为 】 命 令 ， 打开 【标签 检查 器 】 面 板 后 ，Dreamweaver 将 默认 打开 【行为 】 
面板 。 

在 【行为 】 面 板 的 行为 列表 中 显示 了 已 经 附加 到 当前 所 选 页 面 元 素 的 行为 ， 并 按 事件 以 字母 顺序 列 
出 。 如 果 针 对 同一 个 事件 列 有 多 个 动作 . 则 会 按 在 列表 中 出 现 的 顺序 执行 这 些 动作 。 如 果 行为 列表 中 没 
有 显示 任何 行为 ， 则 表示 没有 行为 附加 到 当前 所 选 的 页 面 元 素 。 

【显示 设置 事件 】 按 馈 国 : 单 击 【 显 示 设 置 时 间 】 按 钮 后 将 显示 当前 元 素 已 经 附加 到 当前 文档 的 
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事件 。 

【显示 所 有 事件 】 按 馈 国 :， 单 击 该 按钮 ， 显 示 当前 元 素 所 有 可 用 的 事件 。 在 显示 事件 菜单 项 里 做 不 
同 的 选择 ， 可 用 的 事件 也 不 同 。 一 般 来 说 ， 浏 览 器 的 版 本 越 高 ， 可 支持 的 事件 越 多 。 

添加 行为 : 单 击 园 按钮 ， 在 弹出 的 下 拉 菜 单 中 显示 了 所 有 可 以 附加 到 当前 选 定 元 素 的 动作 ， 当 从 该 
列表 中 选择 一 个 动作 时 ， 将 打开 相应 的 对 话 框 ， 用 户 可 以 在 此 对 话 框 中 指定 该 动作 的 参数 。 

删除 事件 ， 从 行为 列表 中 选中 所 需 删除 的 事件 和 动作 ， 单 击 国 | 按钮 ， 即 可 删除 。 

【增加 事件 值 】 按 钮 辆 和 【降低 事件 值 】 按 钮 国 |: 在 行为 列表 中 上 下 移动 特定 事件 的 选 定 动作 。 只 
能 更 改 特定 事件 的 动作 顺序 ， 例 如， 可 以 更 改 onLoad 事件 中 发 生 的 几 个 动作 的 顺序 ， 但 是 所 有 onLoad 
动作 在 行为 列表 中 都 会 放置 在 一 起 。 对 于 不 能 在 列表 中 上 下 移动 的 动作 ， 箭 头 按钮 将 处 于 禁用 状态 。 

事件 : 选中 事件 后 ,会 显示 一 个 下 拉 箭 头 按钮 ， 单 击 该 按钮 ， 弹 出 一 个 下 拉 菜 单 ， 在 该 菜单 中 包含 
了 可 以 触发 该 动作 的 所 有 事件 ， 该 菜单 仅 在 选中 某 个 事件 时 可 见 。 根 据 所 选 对 象 的 不 同 ， 显 示 的 事件 也 
有 所 不 同 。 

Dreamweaver 系列 软件 内 置 了 多 种 行为 动作 ， 基 本 可 以 满足 网 页 设计 的 需要 。 此 外 ,还 可 以 连接 到 
Macromedia Exchange Web 站 点 以 及 第 三 方 开发 人 员 站 点 上 找到 更 多 的 动作 . 或 者 编写 行为 动作 。 下 面 将 
分 别 介绍 Dreamweaver 中 常用 内 置 行为 的 使 用 方法 。 

1.【 预 先 载 入 图 像 】 行 为 

使 用 【预先 载 入 图 像 】 行 为 ， 可 以 使 浏览 器 下 载 那些 尚未 在 网 页 中 显示 但 是 可 能 显示 的 图 像 ， 并 将 
之 存储 到 本 地 缓存 中 ,这样 可 以 脱 机 浏览 网 页 。 

2.【 交 换 图 像 】 行 为 

【交换 图 像 】 行 为 主要 用 于 动态 改变 图 像 对 应 <img> 标 记 的 scr 属性 值 . 利用 该 动作 . 不 仅 可 以 创建 普 
通 的 翻转 图 像 ， 还 可 以 创建 图 像 按钮 的 翻转 效果 。 

3.【 恢 复 交 换 图 像 】 行 为 

与 【交换 图 像 】 行 为 相对 应 ,使 用 【恢复 交换 图 像 】 动 作 ， 可 以 将 所 有 被 替换 显示 的 图 像 恢复 为 原 
始 图 像 。 一 般 来 说 ， 在 设置 替换 图 像 动 作 时 ,会 自动 添加 替换 图 像 恢复 动作 ， 这 样 当 光标 离开 对 象 时 自 
动 恢 复原 始 图 像 。 用 户 单 击 【行为 】 面 板 上 的 【添加 】 按 钮 [ 辐 ， 在 弹出 的 菜单 中 选择 【恢复 交换 图 像 】 
命令 (或 双击 【行为 】 面 板 中 添加 的 【恢复 交换 图 像 】 行 为 )， 即 可 打开 【恢复 交换 图 像 】 对 话 框 。 

4.【 拖 动 层 】 行 为 

使 用 【 拖 动 层 】 行 为 ， 可 以 实现 在 页 面 上 对 层 及 其 中 的 内 容 进行 移动 ， 以 实现 某 些 特殊 的 页 面 效果 。 
在 【 拖 动 AP 元 素 】 对 话 框 的 【基本 】 选 项 卡 中 ,可 以 设置 拖 动 层 的 层 、 移 动 方式 等 内 容 ， 其 主要 参数 选 
项 的 具体 作用 如 下 。 

【Ap 元 素 】 下 拉 列 表 框 : 选择 需要 控制 的 层 名 称 。 

【移动 】 下 拉 列 表 框 : 选择 层 被 拖 动 时 的 移动 方式 ， 包 括 以 下 两 个 选项 。 选 择 【 限 制 】 选 项 ， 则 层 的 
移动 位 置 是 受 限制 的 ， 此 时 可 以 在 右 方 显示 的 文本 框 中 分 别 输入 可 移动 区 域 的 上 、 下 、 左 、 右 位 置 值 . 
这 些 值 是 相对 层 的 起 始 位 置 而 言 的 . 单位 是 像素 : 选择 【不 限制 】 选 项 ， 则 可 以 实现 层 在 任意 位 置 上 的 
移动 。 

【放下 目标 】 选 项 区 域 : 设置 层 被 移动 到 的 位 置 。 可 在 【 左 】 和 【上 ]】 文 本 框 中 输入 层 移 动 后 的 起 始 
位 置 ; 单 击 【取得 目前 位 置 】 按 钮 ， 可 获取 当前 层 所 在 的 位 置 。 

【 靠 齐 距离 】 文 本 框 : 输入 层 与 目标 位 置 靠 齐 的 最 小 像素 值 。 当 层 移动 的 位 置 同 目标 位 置 之 间 的 像素 
值 小 于 文本 框 中 的 设置 时 ， 层 会 自动 靠 齐 到 目标 位 置 上 。 
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在 【 拖 动 AP 元 素 】 对 话 框 中 选中 【高 级 】 选 项 卡 后 . 用 户 可 以 设置 拖 动 层 的 拖 动 控制 点 等 内 容 。【 高 
级 】 选 项 卡 中 的 主要 选项 参数 的 具体 作用 如 下 。 

【 拖 动 控制 点 】 下 拉 列 表 框 : 设置 在 拖 动 层 时 拖 动 的 部 位 ， 可 以 选择 【整个 层 】 和 【 层 内 区 域 】 两 个 
选项 。 

【 拖 动 时 】 选 项 区 域 : 设置 层 被 拖 动 时 的 相关 设置 。 选 中 该 复 选 框 则 可 以 设置 层 被 拖 动 时 在 层 重 翅 
堆栈 中 的 位 置 ， 可 选择 【 留 在 最 上 方 】 和 【恢复 z 轴 】 两 个 选项 。 在 【呼叫 JavaScript】 文 本 框 中 ， 可 设 
置 当 层 被 拖 动 时 调用 的 JavaScript 代码 。 

【放下 时 】 选 项 区 域 : 设置 层 被 拖 动 到 指定 位 置 并 释放 后 的 相关 设置 。 在 【呼叫 JavaScript】 文本 框 
中 ,设置 当 层 被 释放 时 调用 的 JavaScript 代码 。 

5.【 显 示 和 隐藏 元 素 】 行 为 

给 网 页 中 的 元 素 附 加 【显示 -隐藏 元 素 】 行 为 ， 可 以 显示 、 隐 藏 或 恢复 一 个 或 多 个 网 页 元 素 的 默认 可 
见 性 。 此 行为 用 于 在 进行 交互 时 显示 信息 。 例 如 ， 将 光标 移 到 一 个 植物 图 像 上 时 ， 可 以 显示 一 个 页 面 元 
素 ， 此 元 素 给 出 有 关 该 植物 的 生长 季节 和 地 区 、 需 要 多 少 阳光 、 可 以 长 到 多 大 等 详细 信息 。 

6.【 检 查 插 件 】 行 为 

使 用 【检查 插件 】 行 为 ， 可 以 设置 检查 在 访问 网 页 时 ， 浏 览 器 中 是 否 安装 有 指定 插件 ， 通 过 这 种 检 
查 ， 可 以 分 别 为 安装 插件 和 未 安装 插件 的 用 户 显示 不 同 的 页 面 。 

单 击 【 行 为 】 选 项 卡 面板 上 的 [*.| 按 钮 ， 在 弹出 的 菜单 中 选择 【检查 插件 】 命 令 ， 可 以 打开 【检查 插 
件 】 对 话 框 ， 该 对 话 框 中 的 主要 参数 选项 的 功能 如 下 。 

【插件 】 选 项 区 域 : 用 于 选择 要 检查 的 插件 类 型 。 在 【选择 】 下 拉 列 表 框 中 可 以 选择 插件 类 型 ; 在 【 输 
入 】 文 本 框 中 可 直接 输入 要 检查 的 插件 类 型 。 

【如 果 有 . 转 到 URL】 文 本 框 : 用 于 设置 当 检查 到 用 户 浏览 器 中 安装 了 该 插件 时 跳 转 到 的 URL 地 址 。 
也 可 以 单 击 【浏览 〗】 按 钮 打开 【选择 文件 】 对 话 框 ， 选择 目标 文档 。 

【否则 , 转 到 URL] 文本 框 : 用 于 设置 当 检查 到 用 户 浏览 器 中 尚未 安装 该 插件 时 跳 转 到 的 URL 地 址 。 
7.【 调 用 JavaScript] 行为 

在 网 页 中 使 用 【调用 JavaScript】 行 为 可 以 设置 当 触 发 事件 时 调用 相应 的 JavaScript 代码 ， 以 实现 相 
应 的 动作 。 

8.【 转 到 URL] 行为 

使 用 【 转 到 URL]】 行 为 ， 可 以 设置 在 当前 浏览 器 窗口 或 指定 的 框架 窗口 中 载 入 指定 的 页 面 ， 该 动作 
在 同时 改变 两 个 或 多 个 框架 内 容 时 特别 有 用 。 

9.【 打 开 浏览 器 窗口 】 行 为 

使 用 【打开 浏览 器 窗口 】 行 为 ， 可 以 在 一 个 新 的 浏览 器 窗口 中 载 入 位 于 指定 URL 位 置 上 的 文档 。 同 
时 ,还 可 以 指定 新 打开 浏览 器 窗口 的 属性 ， 例 如 大 小 、 是 否 显示 菜单 条 等 。 

【打开 浏览 器 窗口 】 对 话 框 中 的 主要 参数 选项 的 功能 如 下 。 

【要 显示 的 URL】 文 本 框 : 用 于 输入 在 新 浏览 器 窗口 中 载 入 的 URL 地 址 . 也 可 以 单 击 【浏览 】 按 钮 , 
选择 链接 目标 文档 。 

【窗口 宽度 】 和 【窗口 高 度 】 文 本 框 : 用 于 输入 新 浏览 器 窗口 的 宽度 和 高 度 ， 单 位 是 像素 。 

【属性 】 选 项 区 域 : 用 于 设置 新 浏览 器 窗口 中 是 否 显示 相应 的 元 素 ， 选中 复 选 框 则 显示 该 元 素 ， 清 除 
复 选 框 则 不 显示 该 元 素 。 这 些 元 素 包括 导航 工具 栏 、 地 址 工具 栏 、 状 态 栏 、 菜 单条 、 需 要 时 使 用 滚动 条 、 
调整 大 小 手柄 。 
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【窗口 名 称 】 文 本 框 : 用 于 为 新 打开 的 浏览 器 窗口 定义 名 称 。 
10.【 弹 出 信息 】 行 为 

【弹出 信息 】 行 为 也 是 常用 的 行为 之 一 。 在 浏览 网 站 时 经 常会 打开 一 个 对 话 框 ， 在 对 话 框 中 显示 信息 
内 容 . 通过 【弹出 信息 】 行 为 就 可 以 实现 这 一 效果 。 


py 局 入 痢 设 置 文本 和 图 像 


【设置 文本 】 行 为 中 有 4 个 选项 ,分 别 为 【设置 容器 的 文本 】 【设置 文本 域 文字 】〗、【 设 置 框 架 文本 】 
和 【设置 状态 栏 文本 ]。 除 了 【设置 状态 栏 文本 】 选 项 之 外 .其 他 的 三 个 选项 都 有 一 个 共同 的 特点 ， 即 在 
输入 的 文本 内 容 中 可 以 嵌入 任何 有 效 的 JavaScript 函数 调用 、 属 性 、 全 局 变量 或 其 他 的 表达 式 。 本 节 主 要 
讲述 如 何 设置 网 站 中 的 文本 和 图 像 ， 内容 主 要 包括 交换 图 像 、 打 开 浏 览 器 窗口 、 设 置 容器 的 文本 、 设 置 
文本 域 文字 和 设置 框架 文本 。 用 户 通 过 本 节 的 学 习 可 以 了 解 怎 样 设置 网 站 中 的 文本 和 图 像 ， 为 后 面 的 网 
站 建设 奠定 基础 。 


23.4.1 交换 图 像 


交换 图 像 是 网 页 图 像 的 一 种 特殊 效果 ， 其 原理 是 通过 
Dreamweaver 内 置 的 JavaScript 脚本 代码 实现 对 事件 的 响 
应 。 当 激活 事件 时 ， 相 应 的 图 像 将 变 为 另 一 种 图 像 。 交 换 
图 像 特 效 在 网 页 中 非常 常见 ， 如 图 23-7 所 示 。 

合理 使 用 交换 图 像 特 效 ， 可 以 为 网 页 带 来 各 种 动画 
效果 。 在 Dreamweaver 中 ,交换 图 像 可 以 通过 行为 中 的 ” 国 
多 种 事件 触发 。 了 解 这 些 事件 类 型 有 助 于 为 网 页 添加 复 
杂 的 特效 。 这 些 事件 可 以 触发 大 多 数 Dreamweaver 的 行 
为 。 在 Dreamweaver 中 创建 行为 后 ， 必 须 为 行为 添加 合适 
的 触发 事件 才 可 以 将 行为 触发 。 

在 设置 交换 图 像 特 效 时 ,可 以 为 图 像 设 置 ID。 通过 
了 有 D 可 以 更 方便 地 区 分 各 个 图 像 , 防止 制作 多 个 图 像 时 出 
现 错误 。 为 图 像 设置 ID 之 后 ,还 可 以 制作 事件 触发 多 
个 图 像 交换 的 复杂 行为 。 


23.4.2 ”打开 浏览 器 窗口 图 23-7 交接 图 像 


使 用 【打开 浏览 器 窗口 】 行 为 可 以 在 一 个 新 的 窗口 中 打开 页 面 。 同 时 .还 可 以 指定 该 新 窗口 的 属性 、 
特性 和 名 称 。 选 择 文档 中 的 某 一 对 象 ， 在 【行为 】 面 板 中 的 【添加 行为 】 菜 单 中 执行 【打开 浏览 器 窗口 】 
命令 。 然 后 .在 弹出 的 对 话 框 中 选择 或 输入 要 打开 的 URL， 并 设置 新 窗口 的 属性 。 

设置 完成 后 预览 页 面 ， 当 单 击 图 像 后 ， 即 会 在 一 个 新 的 浏览 器 窗口 中 打开 指定 的 网 页 image2.html。 
该 页 面 内 容 区 域 的 尺寸 为 610 x 420 像素 , 且 只 显示 状态 栏 . 如 图 23-8 所 示 。 
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图 23-8 ”打开 浏览 器 窗口 


23.4.3 设置 容器 的 文本 


【设置 容器 的 文本 】 行 为 将 页 面 上 的 现 有 容器 (可 以 包含 文本 或 其 他 元 素 的 任何 元 素 ) 的 内 容 和 格式 
替换 为 指定 的 内 容 。 选 择 文档 中 的 一 个 容器 (如 div 元 素 )， 在 【行为 】 面 板 的 【添加 行为 】 菜 单 中 执行 
【设置 容器 的 文本 】 命 令 。 然 后 ,在 弹出 的 对 话 框 中 选择 目标 容器 ， 并 在 【新 建 HTIML]】 文本 框 中 输入 文 
本 内 容 。 

Wee 当 焦 点 位 于 文档 中 的 容器 时 (如 单 击 该 div 元 素 }. 则 容器 中 的 图 像 蔡 换 为 预 
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图 23-9 设置 容器 的 文本 


23.4.4 ”设置 文本 域 文字 


【设置 文本 域 文字 ] 行为 可 以 用 指定 的 内 容 蔡 换 表 单 文本 域 的 内 容 。 在 表单 的 文本 域 中 可 以 为 文本 域 
指定 初始 值 ， 初 始 值 也 可 以 为 空 。 在 使 用 【设置 文本 域 文 字 】 行 为 之 前 ， 首先 要 在 文档 中 插入 文本 字段 
或 文本 区 域 。 单 击 【 插 入 】 面 板 【 布 局 】 选 项 卡 中 的 【文本 字段 】 或 【文本 区 域 】 按 钮 ， 在 弹出 的 对 话 
框 中 设置 DD。 

使 用 鼠标 单 击 文档 的 任意 位 置 ， 在 【行为 】 面 板 的 【添加 行为 】 菜 单 中 执行 【设置 文本 域 文字 】 命 
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令 。 然 后 ， 在 弹出 的 对 话 框 中 选择 目标 文本 域 . 并 在 【新 建文 本 】 文 本 框 中 输入 所 要 显示 的 文本 内 容 。 
设置 完成 后 预览 效果 ， 当 页 面 加载 时 ( 即 触发 Load 事件 ) ， 页 面 中 的 文本 字段 和 文本 域 将 显示 预 设 的 文 
本 内 容 ， 如 图 23-10 所 示 。 
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图 23-10 设置 文本 域 文字 


23.4.5 ”设置 框架 文本 


【设置 框架 文本 】 行 为 允许 动态 设置 框架 的 文本 ,可 以 用 指定 的 内 容 蔡 换 框架 的 内 容 和 格式 设置 。 该 
内 容 可 以 包含 任何 有 效 的 HTML 代码 。 在 使 用 【设置 框架 文本 】 行 为 之 前 ， 首 先 要 创建 框架 页 面 ， 或 者 
直接 在 文档 中 插入 框架 。 单 击 【 布 局 】 选 项 卡 中 的 【框架 ;项 部 框架 】 按 钮 ， 在 文档 中 插入 上 下 结构 的 
框架 。 

将 光标 置 于 mainFrame 框架 中 ， 在 【行为 】 面 板 的 【添加 行为 】 菜 单 中 执行 【设置 框架 文本 】 命 令 。 
然后 , 在 弹出 的 对 话 框 中 选择 框架 名 称 , 并 在 新 建 HIML 文本 框 中 输入 HIML 代码 或 文本 。 设 置 完 成 后 
预览 效果 ， 当 鼠标 指针 经 过 mainFrame 框架 时 ， 其 所 包含 的 页 面 内 容 将 替换 为 指定 的 图 像 ， 如 图 23-11 
所 示 。 
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图 23-11 设置 框架 文本 
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实战 : 制作 游戏 页 面 














在 本 实例 中 ， 游戏 网 页 的 PSD 文档 设计 已 经 通过 Photoshop CS6 设置 完成 。 并 且 ， 在 制作 网 页 前 
已 经 通过 切片 工具 将 其 裁 切 为 网 页 素材 图 像 。 下 面 将 在 Dreamweaver CS6 中 ， 根据 PSD 文档 的 网 页 结构 
通过 网 页 技术 进行 布局 ， 将 图 像 及 Flash 导航 条 添加 到 网 页 中 的 相应 位 置 . 如 图 23-12 所 示 。 
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图 23-12 制作 游戏 页 面 


1. 创建 页 面 布局 并 制作 Logo 和 导航 条 

STEP|01 在 站 点 根 目录 下 创建 images 目录 .将 网 页 素材 图 像 和 Flash 导航 条 保存 至 该 目录 下 。 然 后 ,在 
Dreamweaver 中 创建 名 称 为 index 的 网 页 空白 文档 和 名 称 为 main 的 CSS 文档 ， 并 将 它们 保存 至 站 点 根 目 
录 下 。 

STEP|02 修改 <title></title> 标 签 之 间 的 网 页 标题 ， 然 后 在 该 标签 下 面 添加 <link> 标 签 ， 为 网 页 文档 导入 
外 部 的 CSS 文件 。 


<title> 游 戏 部 落 </title> 


<link rel="stylesheet" type="text/css" href="main.css"/> 
STEP|03 在 main.css 文档 中 为 <body> 标 签 定义 CSS 样式 . 以 设置 网 页 文档 的 外 边 距 、 填 充 和 背景 图 像 。 


body { 

margin:0px; 

padding:0px; 

background-image:url (images/bg.jpg); 
} 
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STEP|04 在 index.html 文档 的 <body></body> 标 签 之 间 ， 使 用 <div> 标 签 创建 网 页 的 基本 布局 结构 ， 并 定 
义 相应 的 id 名 称 。 
<div id="header"><!-- 网 页 的 版 头 --> 
<div id="logo"></div><!1-- 网 页 的 Logo--> 
<div id="nav"></div><!-- 网 页 的 导航 条 --> 


</div> 
<div id="content"><!-- 网 页 的 主体 内 容 --> 





阁 


<div id="left"></div> 

<!-- 网 页 主题 内 容 的 左 侧 部 分 ， 即 游戏 排行 榜 --> 

<div id="right"></div> 

<!-- 网 页 主题 内 容 的 右 侧 部 分 ， 即 banner、 游 戏 版 块 和 版 块 信息 --> 
</div> 





STEP|05 在 main.css 文档 中 . 定义 id 为 header 的 Div 容器 的 布局 方式 . 大 小 和 层 谷 顺序 . 以 及 id 为 logo 
的 Div 容器 的 浮动 方向 、 大 小 和 背景 图 像 。 





#header{ 

position:absolute; /* 绝 对 定位 */ 
width:1003px;height:58px; 

z-index:2; /+* 层 痘 顺序 为 2*/ 

} 

#1logo{ 

float:left; /* 向 左 浮动 */ 
width:275px;height:103px; 
background-image:url (images/logo.gif); 


} 
STEPI06 在 main.css 文档 中 ， 定 义 id 为 nav 的 Div 容器 的 浮动 方向 和 大 小 。 然 后 在 index.html 文档 中 ， 
执行 【插入 】〗】| 【媒体 】| SWF 命令 ， 在 <div id="nav"></div> 标 签 之 间 插入 Flash 导航 条 。 

#navt{ 

float:left; 

width:660px;height:58px; 

上 
2. 制作 游戏 排行 
STEP|01 在 main.css 文档 中 ,定义 id 为 content、left 和 Tight 的 Div 容器 的 大 小 、 定 位 方式 、 层 县 顺序 、 
背景 图 像 等 属性 ， 为 网 页 的 主体 部 分 布局 。 











#content{ 
position:absolute; 
top:58px; 
width:1003px;height:750px; 
z-index:1; 


} 
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#1left{ 

float:Jerft> 

width:245px;height:750px; 

| 

#right{ 

float:left; 

width:758px;height:750px; 
background-image:url (images/content bg.gif); 
background-repeat:no-repeat; 


} 


STEP|02 在 id 为 lef 的 Div 容器 中 .分 别 插入 id 为 sidebar 和 top_list 的 Div 容器 ， 
器 中 插入 侧 边 图 像 。 然 后 在 main.css 文档 中 ， 定 义 这 两 个 Div 容器 的 样式 属性 。 








<div id="sidebar"><img src="images/sidebar.gif" /></div> 
<div id="top list"></div> 


CSS 代码 : 


#sidebar{ 

float:left;margin-top:70px; 
width:66px;height:613px; 

} 

#top listf{ 

position:absolute;float:left; 
width:283px;height:604px; 
background-image:url (images/list bg.gif); 
left:10px;top:80px; 


并 在 第 一 个 Div 容 


filter:Shadow (enabled=true,Color=#444444,Direction=135,strength:1px); 


j 








<div id="top header"><img src="images/top header.jpg" border= 
<div id="top content"></div> 


CSS 代码 : 


#top header{ 

margin:20px auto 0px auto; 
width:234px;height:60px; 

} 

#top content{ 

margin:0px auto Opx auto; 
width:234px;height:500px; 
} 





/* 投 影 滤 镜 */ 


STEP|03 在 id 为 top_list 的 Div 容器 中 , 插入 id 为 top_header 和 top_content 的 Div 容器 。 在 第 1 个 Div 
容器 中 插入 “游戏 排行 榜 ” 的 标题 图 像 。 然 后 在 main.css 文档 中 .定义 这 两 个 Div 容器 的 大 小 和 外 边 距 。 


0" /></div> 
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STEP|04 在 id 为 top_content 的 Div 容器 中 .通过 <ul><li> 标 签 制作 游戏 排行 榜 的 内 容 ， 并 在 每 一 个 <li> 
标签 中 插入 两 个 Div 容器 ， 以 显示 游戏 的 名 称 、 等 级 和 图 像 等 相关 信息 。 








01> 
<li id="top 01"> 
<div class="top left"><b> 剑 网 三 </b><span><img src="images/stars/9.gif" /> 
</span></div> 
<div class="top right"><img src="images/top9 01.jpg" /></div> 
</1i> 
<1i id="top 02"> 
<div class="top_left"><b> 七 龙珠 OL</b><span><img src="images/stars/8.gif" /> 
</span></div> 
<div class="top right"><img src="images/top9 02.jpg" /></div> 
A 
<1li id="top 03"> 
<div class="top left"><b> 剑 灵 </b><span><img src="images/stars/7.gif" /> 
</span></div> 
<div class="top right"><img src="images/top9 03.jpg" /></div> 
</1i> 
</ul> 


STEP|05 在 main.css 文档 中 , 定义 列表 的 显示 样式 、 大 小 等 属性 , 并 为 列表 中 的 Div 容器 .b 标签 、span 
标签 等 定义 相应 的 样式 属性 。 





#top content ul{ 

list-style-type:none; /* 去 除 列表 项 目 符 号 */ 
margin-top:0px;margin-left:2px;margin-bottom: Opx; 
padding:0px; 

} 

#top content ul 1if{ 

display:block; 

width:232px;height:51lpx; 

margin:0px; padding:0px; 

} 

#top content ul li div{ 
position:relative; float:left; 
display:block;padding:0px;height:50px; 

} 

“Op Left 

width:125px;margin:0px Opx Opx 30px; 

‘top left bf 

display:block;margin-top: 4px;width:125px; 
color:#7e213e;font-size:14px;text-align:center; 
} 

.top right{width:77px;} 





#top content spant{ 

display:block; margin-top:15px;width:125px; 

} 

/* 游 戏 图 像 */ 

#top 0l{background-image:url (images/top 01 -jpg) } 
#top 02{background-image:url (images/top 02.jpg)} 
#top 03{background-image:url (images/top 03.jpg)} 
#top 04{background-image:url (images/top 04.jpg)} 
#top_05{background-image:url (images/top 05.jpg)} 
#top 06{background-image:url (images/top 06.jpg)} 
#top_07{background-image:url (images/top 07.jpg) } 
#top_08{background-image:url(images/top 08.jpg) } 
#top_09{background-image:url (images/top 09.jpg) } 


3. 制作 网 站 新 闻 版 块 
STEP|01 在 id 为 right 的 Div 容器 中 , 插入 id 为 banner、main 和 copyright 的 Div 容器 ,并 在 第 1 个 Div 
容器 中 插入 banner 图 像 ， 在 第 3 个 Div 容器 中 输入 版 权 信息 。 然 后 在 main.css 文档 中 ， 定 义 这 些 Div 容 
器 的 样式 属性 。 

XHTML 代码 : 




















<div id="banner"><img src="images/banner.jpg" border="0" /></div><!-- 网 页 banner--> 

<div id="main"></div><!-- 网 页 主体 内 容 --> 

<div id="copyright">Copyright © 2009 All Content | Power by RedGemini</div> 
<!-- 网 页 版 权 信 息 --> 


CSS 代码 : 


#banner{ 
margin-top:l5px;margin-left:65px; 
width:655px;height:115px; 

} 

#maint{ 

margin-top:l0px;margin-left:60px; 
width:667px;height:520px; 
background-color:#454545; 

} 

#copyright{ 
margin-left:60px;width:667px;height:53px; 
background-image:url (images/footer bg.jpg); 
Color:#67787f; 
text-align:center;line-height:53px; 

} 


STEPI02 在 id 为 main 的 Div 容器 中 ,插入 id 为 ttp、center 和 bottom 的 Div 容器 ， 用 来 制作 游戏 网 站 
中 的 “新 游资 讯 ” 等 版 块 。 然 后 在 main.css 文档 中 定义 这 些 Div 容器 的 大 小 、 布 局 方式 等 属性 。 

















页 设计 与 网 站 建设 自学 经 典 





<div id="top"></div> 
<div id="center"></div> 


<div id="bottom"></div> 
CSS 代码 : 


#top{width:668px;height:165px;} 
#centert{ 
position:relative; 
margin-top:5px;margin-left:S5px;margin-bottom: Opx; 
padding:0px; 
width:658px;height:175px; 
background-image:url (images/subject.jpg); 
} 
#bottom{ 
width:658px;height:170px; 
margin-left:5px;margin-top: 5px; 
} 








STEP|03 在 id 为 top 的 Div 容器 中 , 插入 id 为 news 和 demos 的 Div 容器 , 用 来 制作 “新 游资 讯 和 “新 
游 试 玩 ” 版 块 。 然 后 在 main.css 文档 中 定义 这 两 个 Div 容器 的 浮动 方向 、 大 小 、 背 景 图 像 等 属性 。 





























news"></div> 





demos"></div> 


CSS 代码 


#news{ 
float:left; 
margin-top:Spx;margin-left:Spx; 
width:326px;height:157px; 
background-image:url (images/news_demos.jpg); 
} 
#demos{ 
float:left; 
margin-top:S5px;margin-left:Spx; 
width:326px;height:157px; 
background-image:url (images/news_demos.jpg); 
} 





STEP|04 在 id 为 news 的 Div 容器 中 . 插入 id 为 news title 和 news list 的 Div 容器 . 并 在 其 中 输入 版 块 
标题 和 内 容 。 然 后 在 main.css 文档 中 定义 Div 容器 的 样式 属性 及 文字 和 链接 的 样式 。 
XHTML 代码 : 





<div id="news_title"><span class="title"> 新 游资 讯 </span><span class="more"><a 
href="#">moreggt; ggt;</a></span> </div> 


<div id="news list"> 
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<ul class="font"> 
<1i> 韩 国 《冒险 岛 》 韩 服 公 开 新 职业 了 矛 战士 (图 ) 06-19 </1i> 
<1i> 韩 国 韩国 新 作 《OZ Eestival》24 日 一 测 06-19 </1i> 
<1i> 韩 国 生活 型 社区 网 游 《MRF Online》 公 开 06-19</1i> 
</ul> 
</div> 


CSS 代码 : 


#news titlef{ 

width:296px;height:35px; 
margin-left:30px;margin-right:auto; 
text-align:center;line-height:35px; 

} 

#news_list{width:326px;height:120px;} 

#news_list ul{ 
display:block;margin-top:0px;margin-bottom: Opx; 

} 

se 
font: "微软 雅 黑 
font-weight:bolder;color:#912346; 
display:block;float:left; 

} 

.more {display:block;float:right;margin-right:10px;} 


;font-size:14px; 





.more a:link,a:visited{ 
font:" 微 软 雅 黑 ";font-size:14px; 
font-weight:bold;color:#912346; 
text-decoration:none; 

} 

.more a:hovert{ 
font: "微软 雅 黑 
font-weight:bold;color:#000000; 
text-decoration:none; 


.font{font:" 宋 体 ";font-size:12px;color:#000;} 





;font-size:14px; 





STEP|05 在 id 为 demos 的 Div 容器 中 ,插入 id 为 demos_title 和 demos_content 的 Div 容器 ， 并 在 其 中 
输入 版 块 标题 和 内 容 。 然 后 ， 在 main.css 文档 中 定义 Div 容器 的 大 小 及 游戏 图 像 和 文字 介绍 的 外 边 距 等 
样式 属性 。 








<div id="demos title"> 

<span class="title"> 新 游 试 玩 </span> 

<span class="more"><a href="#">moreg&gt;&gt;</a></span> 
</div> 


<div id="demos content"><img src="images/game 01.jpg"border="0"/><span class= 
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"font"> 《名 将 三 国 》 是 一 款 取材 于 三 国 历史 背景 的 新 概念 横 版 格斗 网 游 。 游 戏 升华 了 街机 游戏 《三 
国志 -吞食 天 地 》 和 《名 将 》. .. [全文] </span> </div> 


CSS 代码 : 


#demos title{ 
width:296px;height:35px; 
margin-left:30px;margin-right:auto; 
line-height:35px; 
} 
#demos_content {width:326px;height:120px;} 
#demos_content img{ 
float:left; 
margin-left:1l0px;margin-top:4px;margin-right:S5px; 
} 
#demos_content span{ 
display:block; 
margin-left:S5px;margin-top:S5px;margin-right:Spx; 
line-height:18px; 


STEPI06 在 id 为 center 的 Div 容器 中 ,插入 id 为 center_title 和 center_content 的 Div 容器 , 用 于 制作 “网 
游 专题 ”版 块 。 然 后 ， 在 main.css 文档 中 定义 Div 容器 的 样式 属性 。 








<div id="center title"> 

<span class="title"> 网 游 专题 </span> 

<span class="more"><a href="#">moreg&gt;&gt;</a></span> 
</div> 


<div id="center content"></div> 
CSS 代码 : 


#center titlef{ 

width:625px;height:35px; 

margin-left:30px; 

line-height:35px; 

#center content{width:658px;height:140px;} 


STEP|07 在 id 为 center_content 的 Div 容器 中 ， 插 入 <ul><li> 项 目 列表 ， 用 于 制作 “网 游 专题 ”的 内 容 。 
然后 在 main.css 文档 中 定义 项 目 列表 、 图 像 和 文字 的 样式 属性 。 

















<ul> 
<li><div id="center 01 img"><img src="images/game 02.jpg" /></div><div id= 
"center_01 title"> 《永恒 之 塔 》 国 服 体验 专题 </div></1i> 
<li><div id="center 02 img"><img src="images/game 03.jpg" /></div><div id= 
"center _02 _ title"> 《冲锋 岛 》 国 服 视频 专题 </div></1i> 
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行为 





<1li><div id="center 03 img"><img src="images/game 02.jpg" /></div><div 
id="center 03 title"> 真 仙 侠 新 奇迹 ! 罚 门 OL 专区 上 线 </div></1i> 


</ul> 
CSS 代码 : 


#center content ulf{ 
margin:0px;padding:0px; 
list-style-type:none; 

} 

#center content ul 1i{ 
float:left;display:block; 
width:214px;height:135px; 
margin:4px Opx Opx 4px; 
padding:0px; 

} 

#center 01 title,#center 02 title,#center 03 title{ 
height:20px;font-size:12px; 
line-height:20px;text-align:center; 





STEP|08 在 id 为 bottom 的 Div 容器 中 ,插入 id 为 video 和 newGame 的 Div 容器 ， 用 于 制作 “精彩 视 
频 ” 和 “最 新 网 游 ” 版 块 。 然 后 在 main.css 文档 中 定义 这 两 个 Div 容器 的 样式 属性 。 


<div id="video"></div> 


<div id=”"newGame”></div> 


CSS 代码 : 


#video{ 
float:left; 
width:218px;height:159px; 
background-image:url (images/video.jpg) 
} 
#newGame { 
float:left; 
width:433px;height:157px; 
margin-left:S5px; 
background-image:url (images/newGame.jpg); 


} 








STEP|09 在 id 为 video 的 Div 容器 中 .插入 id 为 video title 和 video_content 的 Div 容 嚣 ， 并 在 其 中 插 
入 游戏 视频 图 像 ， 用 于 制作 “精彩 视频 ”版 块 。 

















<alv Lid=" video tit ler> 
<span class="title"> 精 彩 视频 </span> 


<span class="more"><a href="#">moreggt;g&gt;</a></span> 
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</div> 
<div id="video content"> 
<img src="images/game 05.jpg" border="0"/> 


</div> 


CSS 代码 


#video title{width:188px; 
height:35px;margin-left:30px; 
margin-right:auto;line-height:35px;} 

#video content{ 
width:213px; height:117px; 
margin-left:5px; margin-top:3px;} 


STEP|10 在 id 为 newGame 的 Div 容器 中 . 插入 为 newGame title 和 newGame_content 的 Div 容器 ， 用 
于 显示 “最 新 网 游 ”版 块 的 标题 和 内 容 。 然 后 在 main.css 文档 中 定义 这 两 个 Div 容器 的 样式 属性 。 











<div id="newGame title"> 

<span class="title"> 最 新 网 游 </span><span class="more"><a href="#">moreg&gt;&gt; 
</a></span> 

</div> 


<div id="newGame content"></div> 


CSS 代码 


#newGame titlef{ 
width:400px;height:35px; 
margin-left:30px;margin-right:auto; 
line-height:35px; 

} 

#newGame_ content{ 

width:424px; 

height:117px; 

} 





STEP|11 在 id 为 newGame_content 的 Div 容器 中 .插入 <ul><li> 项 目 列表 ， 用 于 显示 最 新 网 游 的 图 像 和 
名 称 。 然 后 在 main.css 文档 中 定义 项 目 列表 的 样式 属性 。 





<ul> 





newGame 01 img"><img src="images/game 06.jpg" /></div> 
<div id="newGame 01 title"> 纷 争 OL</div> 

</1i><1i> 

<div id="newGame 02 img"><img src="images/game 07.jpg" /></div> 
<div id="newGame 02 title"> 宠 物 小 精灵 </divV> 

</1i><1i> 


<div id="newGame 03 img"><img src="images/game 08.jpg" /></div> 





<div id="newGame 03 title"> 秦 伤 </div> 

</1i><1i> 

<div id="newGame 04 img"><img src="images/game 09.jpg" /></div> 
<div id="newGame 04 _ title"> 魔 灵 OL</div> 

</JLE> 

</ul> 


CSS 代码 : 


#newGame content ul{ 
margin:0px;padding:0px; 
list-style-type:none; 

} 

#newGame_ content ul 1if{ 
float:left;display:block; 
width:100px;height:100px; 
margin:8px Opx Opx 6px; 
padding:0px; 

} 

#newGame 01 title,#newGame 02 title,#newGame 03 title,#newGame 04 title{heig 
ht:20px; 

font-size:12px; 
text-align:center;line-height:20px; 


} 





本 人 


随 着 网 页 技术 的 发 展 . 很 多 网 站 为 了 使 内 容 更 加 丰富 和 具有 动感 . 开始 为 网 页 插入 一 些 多 媒体 内 容 . 
包括 插入 视频 和 动画 等 资源 。 绘 图 和 编辑 图 形 、 补 间 动 画 和 遮 党 是 Flash 动画 设计 的 三 大 基本 功能 ,作为 
功能 最 强大 的 动画 设计 软件 ， 它 以 流 式 控制 技术 和 矢量 技术 为 核心 ， 制 作 的 动画 具有 短小 精 悍 的 特点 ， 
广泛 应 用 于 网 页 动画 的 设计 中 。 

本 章 将 详细 介绍 网 站 建设 中 的 Flash 动画 , 主要 内 容 有 和 餐饮 网 站 、 帧 、 元 件 . 滤 镜 、 补 间 、 特 效 . 3D、 
骨骼 和 综合 实战 。 通 过 本 章 的 学 习 我 们 可 以 知道 怎样 在 网 站 中 应 用 Flash 动画 。 





第 24 章 ”Flash 动画 








餐饮 网 站 





餐饮 行业 是 一 个 竞争 激烈 的 传统 行业 ， 在 资讯 发 达 的 今天 ,营销 策划 尤为 重要 。 计 算 机 网 络 技术 的 
发 展 为 餐饮 企业 的 信息 化 提供 了 技术 上 的 支持 ， 餐饮 可 以 通过 网 站 将 信息 传递 到 受众 面前 ， 引 导 受 众 参 
与 。 本 节 主 要 讲述 4 个 方面 的 内 容 ， 分别 是 餐饮 门户 网 站 、 餐 饮 网 站 分 类 、 餐 饮 网 站 风格 与 色彩 设计 和 
餐饮 网 站 主题 与 色彩 设计 ， 用 户 可 以 通过 对 本 章 学 习 了 解 餐饮 网 站 。 


24.1.1 餐饮 门户 网 站 


餐饮 门户 网 站 ， 以 餐饮 业 为 对 象 汇聚 了 各 类 餐饮 娱乐 相关 信息 .服务 于 大 众 百姓 ， 服 务 于 各 餐饮 企 
业 ， 在 消费 者 与 餐饮 业 之 间架 起 了 一 座 沟通 的 桥梁 ,增进 了 餐饮 娱乐 行业 与 消费 者 之 间 的 交流 和 信任 。 
1. 地 域 性 餐饮 网 站 

餐饮 都 有 地 域 性 ,餐饮 行 业 的 地 域 性 决定 了 顾客 就 餐 的 本 地 性 。 换 句 话说 ,餐饮 企业 的 顾客 群 基本 
上 都 在 本 城市 内 。 
2. 健康 餐饮 网 站 

健康 饮食 网 是 一 个 以 健康 、 饮 食 为 主题 的 专业 美食 网 站 ,致力 于 为 大 家 提供 各 种 健康 保健 知识 和 保 
健 常识 ， 包 括 饮食 健康 、 心 理 健康 、 疾 病 防治 、 养 生 保健 、 中 医 养 生 、 生 活 保健 等 方面 。 
3. 餐饮 制作 网 站 

餐饮 制作 网 站 侧重 服务 ， 主 要 向 大 家 提供 餐饮 的 制作 方法 及 技巧 ， 如 甜品 美食 制作 网 站 和 热 食 制作 
网 站 。 
4. 综合 性 餐饮 网 站 

一 些 餐 饮 网 站 在 以 销售 产品 营利 为 目的 的 同时 ， 也 提供 一 些 与 餐饮 有 关 的 信息 ， 如 提供 一 些 制作 餐 
饮 或 餐饮 文化 等 方面 内 容 服务 于 大 家 ， 增强 网 页 的 丰富 性 。 


24.1.2 ”餐饮 网 站 分 类 


一 些 餐 饮 企 业 或 餐饮 店面 以 具有 针对 性 的 产品 内 容 为 主题 ， 在 装修 上 有 自己 独特 的 风格 。 根 据 装修 
的 风格 、 产 品 的 特色 以 及 饮食 文化 ， 定 位 网 站 设计 风格 。 在 设计 方面 ,还 需要 符合 消费 者 心理 ,能够 促 
进 消费 者 的 食欲 。 
1. 中 式 餐 饮 网 站 

中 式 餐饮 ， 不 言 而 喻 以 中 国 的 餐饮 为 主 ， 目 标 消费 者 多 数 是 中 国人 ， 所 以 网 页 在 色调 搭配 上 大 多 以 
传统 色调 为 主 。 
2. 西式 餐饮 网 站 

西餐 这 个 词 是 由 于 它 特定 的 地 理 位 置 所 决定 的 。 我 们 通常 所 说 的 西餐 主要 包括 西欧 国家 的 饮食 菜 着 
同时 还 包括 东欧 各 国 、 地 中 海 沿 岸 等 国 和 一 些 拉丁 美洲 如 墨西哥 等 国 的 菜 着 。 根 据 不 同 国家 的 风情 ， 网 
页 设计 风格 也 会 有 所 不 同 。 
3. 糕点 餐饮 网 站 

糕点 餐饮 主要 是 蛋糕 、 起 酥 、 小 点 心 等 食物 ， 在 外 观 设计 上 比较 精致 美观 。 网 站 设计 多 数 以 食物 特 
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色 而 定 风格 。 
4. 冰点 餐饮 网 站 

冰点 饮食 主要 包括 饮料 、 雪 花 酷 和 冰激凌 等 ， 网 站 的 设计 风格 一 般 是 清爽 、 淡 雅 的 。 网 站 可 以 展示 
实体 产品 或 用 抽象 物 概括 ， 在 设计 方面 只 要 能 突出 主题 即 可 。 
5. 饮料 类 网 站 

在 餐饮 类 网 站 中 ,其实 除 了 用 和 餐 的 相关 内 容 外 . 还 包含 饮料 类 产品 ， 如 饮料 、 酒 类 等 。 饮 料 是 以 水 
为 基本 原料 ， 供 人 们 直接 饮用 或 食用 的 食品 。 饮 料 可 以 分 为 冷饮 和 热饮 .这 两 种 饮料 的 网 站 设计 各 有 特 
点 。 例 如 ， 雪碧 是 一 种 冷饮 ， 在 色彩 搭配 上 以 冷色 为 主 ， 给 人 一 种 清爽 的 感觉 ， 而 热饮 类 网 站 就 恰恰 相反 。 


24.1.3 ”餐饮 网 站 风格 与 色彩 设计 


风格 是 抽象 的 ， 网 站 风格 是 指 整体 形象 给 浏览 者 的 综合 感受 。 网 页 的 底 色 是 整个 网 站 风格 的 重要 指 
针 。 所 以 ,色彩 作为 网 站 设计 体现 风格 形式 的 主要 视觉 要 素 之 一 ， 对 网 站 设计 来 说 分 量 是 很 重 的 ,而 网 
站 的 色彩 配色 则 根据 网 站 风格 定位 。 

1. 写实 风格 与 色彩 

所 谓 写实 风格 网 站 ， 指 的 是 网 页 中 出 现 的 是 真实 产品 的 图 像 ， 将 产品 外 观 、 特 色 和 风俗 正确 、 忠 实 
地 显示 出 来 ， 网 页 在 色彩 搭配 上 注重 如 何 更 好 地 衬托 产品 。 

2. 抽象 风格 与 色彩 

所 谓 抽象 风格 网 站 ， 与 写实 风格 相反 ,根据 产品 外 观 、 特 色 和 风俗 . 用 简单 的 图 像 或 形象 在 网 页 中 
概括 地 表示 出 来 。 图 像 可 以 稍 加 夸张 、 卡 通化 、 生 动 化 等 ， 在 颜色 上 也 可 以 稍 加 变动 。 


24.1.4 ”餐饮 网 站 主题 与 色彩 设计 


家 的 疆域 有 大 有 小 ,实力 有 强 有 弱 ， 人 口 有 多 有 少 ， 民 族 构 成 、 宗 教 信 仰 、 政 权 性 质 和 经 济 结构 
也 有 差异 ， 故 而 各 国 的 饮食 文化 是 不 一 样 的 .不 同 国家 的 餐饮 网 站 在 风格 及 色彩 搭配 上 也 会 有 所 不 同 。 
1. 中 国 风格 网 站 

中 国 是 一 个 具有 悠久 历史 的 饮食 文化 大 国 . 饮食 一 直 是 其 文化 发 展 的 原动力 之 一 ， 很 早 就 牢固 地 树 
立 了 “ 礼 乐 文化 始 于 食 "、“ 民 以 食 为 天 ”等 观念 , 食 是 人 之 大 欲 。 中 国 自古 就 十 分 注重 饮食 文化 ， 传 统 
的 餐饮 网 站 通常 以 大 红 为 主 色调 或 采用 古典 风格 。 
2. 韩国 风格 网 站 

韩国 传统 的 家 族 观 念 很 强 . 韩国 饮食 文化 和 中 国 十 分 相似 .把 对 生活 的 美好 懂 悍 与 礼 义 孝 的 文化 信 
念 根植 在 韩 食 中 ， 最 终 形成 了 独特 的 韩 食 文化 。 网 站 用 色 一 向 以 大 胆 奔放 著称 ,但 好 作品 往往 让 用 户 感 
觉 不 到 它 的 花哨 和 刺眼 ， 因 为 这 些 色彩 已 经 完美 地 融合 到 了 界面 里 .让 用 户 在 享受 服务 的 同时 ， 也 能 感 
受到 一 丝 温暖 。 
3. 日 本 风格 网 站 

日 本 人 多 喜 生 食 ， 以 尊重 材料 本 身 的 味道 .“ 色 、 形 、 味 ”为 日 本 饮食 文化 的 特征 。 日 本 料理 网 站 
在 网 页 设计 上 风格 简约 但 不 缺 细节 处 理 ， 使 人 的 心情 放松 ， 创造 一 种 安宁 、 平 静 的 生活 空间 。 
4. 欧美 风格 网 站 

西方 人 对 待 饮食 的 观念 是 理性 的 。 西 方 人 把 饮食 当 作 一 门 科学 .以 现实 主义 的 态度 注重 饮食 的 功能 。 
网 页 版 式 是 设计 中 的 视觉 语言 ， 欧 美 用 户 不 习惯 艳丽 、 花 哨 的 色彩 和 设计 风格 .比较 钟情 于 简洁 、 平 淡 
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而 严谨 的 风格 .即使 许多 大 型 网 站 也 是 这 种 风格 。 在 餐饮 网 站 设计 方面 ,色彩 多 数 为 稳定 的 深 棕色 调 。 


24.2 La 


在 Flash 中 .通过 更 改 连 续 帧 中 的 内 容 就 可 以 创建 动画 ,通过 移动 、 旋 转 、 缩 放 、 更 改 颜色 和 形状 等 
操作 ， 即 可 为 动画 制作 出 丰富 多 彩 的 效果 。 本 节 主 要 讲述 帧 类 型 和 帧 的 基本 操作 .用 户 通 过 学 习 为 网 站 
建设 商定 基础 。 


24.2.1 帧 类 型 


帧 是 Flash 动画 的 核心 ， 它 控制 着 动画 的 时 间 以 及 各 种 动作 的 发 生 。 在 通常 情况 下 ,制作 动画 需要 不 
同类 型 的 帧 来 共同 完成 。 其 中 .最 常用 的 帧 类 型 包括 以 下 几 种 。 
1. 关键 帧 

制作 动画 过 程 中 ,在 某 一 时 刻 需要 定义 对 象 的 某 种 新 状态 ， 这 个 时 刻 所 对 应 的 帧 称 为 关键 帧 。 关 键 
帧 是 变化 的 关键 点 ， 如 补 间 动 画 的 起 点 和 终点 以 及 逐 帧 动画 的 每 一 帧 ， 都 是 关键 帧 。 关 键 帧 是 特殊 的 帧 ， 
实心 圆 点 表示 有 内 容 的 关键 帧 ， 即 实 关键 帧 ; 空心 圆 点 表示 无 内 容 的 关键 帧 ， 即 空白 关键 帧 。 右 击 时间 
轴 中 任意 一 帧 ， 在 弹出 的 菜单 中 执行 【插入 关键 帧 】 命 令 ， 即 可 在 所 选择 的 位 置 插入 一 个 实 关键 帧 。 
2. 普通 帧 

普通 帧 也 称 为 静态 帧 ， 在 时 间 轴 中 显示 为 一 个 矩形 单元 格 。 无 内 容 的 普通 帧 显示 为 空白 单元 格 ， 有 
内 容 的 普通 帧 则 会 显示 出 一 定 的 颜色 。 例 如 . 实 关键 帧 后 面 的 普通 帧 显示 为 灰色 。 在 实 关键 帧 后 面 插入 
普通 帧 ， 则 所 有 的 普通 帧 将 包含 该 关键 帧 中 的 内 容 。 也 就 是 说 ， 后 面 的 普通 帧 与 关键 帧 中 的 内 容 相同 。 
3. 过 渡 帧 

过 渡 帧 包括 了 许多 帧 ， 但 其 中 至 少 要 有 两 个 帧 一 一 起 始 关键 帧 和 结束 关键 帧 。 起 始 关键 帧 用 于 决定 
对 象 在 起 始点 的 外 观 ， 而 结束 关键 帧 用 于 决定 对 象 在 结束 点 的 外 观 。 在 Flash 中 , 利用 过 渡 帧 可 以 制作 两 
类 过 渡 动 画 ， 即 运动 过 渡 和 形状 过 渡 。 不 同 颜色 的 帧 代表 不 同类 型 的 动画 。 


24.2.2 ” 帧 的 基本 操作 


帧 的 操作 是 制作 Flash 动画 时 使 用 频率 最 高 、 最 基本 的 操作 ,主要 包括 插入 、 删 除 、 复制、 移动 、 翻 
转 帧 、 改 变动 画 的 长 度 以 及 清除 关键 帧 等 。 
1. 在 时 间 轴 中 插入 帧 

在 时 间 轴 中 插入 帧 的 方法 非常 简单 。 选 择 时 间 轴 中 的 任意 一 帧 ,执行 【 插 入 】|【 时 间 轴 】|【 帧 】 命 
令 , 即 可 在 当前 位 置 插入 一 个 新 的 普通 帧 。 如 果 要 插入 关键 帧 , 同样 选择 时 间 轴 中 的 任意 一 帧 , 执行 【 插 
入 】|【 时 间 轴 】|【 关 键 帧 】 命 令 ， 即 可 在 当前 位 置 插入 一 个 新 的 关键 帧 。 如 果 要 插入 新 的 空白 关键 帧 
选择 时 间 轴 中 的 任意 一 帧 ， 执行 【插入 】|【 时 间 轴 】|【 空 白 关键 帧 】 命 令 ， 即 可 在 当前 位 置 插入 一 个 新 
空白 关键 帧 。 
2. 在 时 间 轴 中 选择 帧 

Flash 提供 两 种 不 同 的 方法 在 时 间 轴 中 选择 帧 。 在 基于 帧 的 选择 (默认 情况 ) 中 .可 以 在 时 间 轴 中 选 
择 单个 帧 ;在 基于 整体 范围 的 选择 中 ,在 单 击 一 个 关键 帧 到 下 一 个 关键 帧 之 间 的 任何 帧 时 ， 整 个 帧 序列 





































































































网 页 设计 与 网 站 建设 自 





都 将 被 选中 。 
如 果 要 选择 时 间 

一 范围 中 的 连续 帧 ， 

选择 另外 一 帧 (如 第 








学 经 典 


轴 中 的 某 一 帧 .只 需要 单 击 该 帧 即 可 ， 将 会 出 现 一 个 蓝 色 的 背景 。 如 果 想 要 选择 某 
首先 选择 任意 一 帧 (如 第 10 帧 ) 作为 该 范围 的 起 始 帧 ， 然 后 按 住 Shift 键 不 放 ， 并 
40 帧 ) 作为 该 范围 的 结束 帧 ， 此 时 将 会 发 现 这 一 范围 内 的 所 有 帧 被 选中 。 














如 果 想 要 选择 某 一 范围 内 多 个 不 连续 的 帧 ， 可 以 在 按 住 Ctrl 键 的 同时 ， 选 择 其 他 帧 。 如 果 想 要 选择 


时 间 轴 中 的 所 有 帧 . 
则 双击 两 个 关键 帧 之 








可 以 执行 【编辑 】|【 时 间 轴 】| 【选择 所 有 帧 】 命 令 。 如 果 想 要 选择 整个 静态 帧 范 上 
间 的 任意 一 帧 即 可 。 








3. 编辑 帧 或 帧 序列 


在 选择 时 间 轴 中 





的 帧 之 后 ， 可 以 执行 复制 、 粘 贴 、 移 动 、 删 除 等 操作 。 


(1) 复制 和 粘贴 帧 
在 时 间 轴 中 选择 单个 或 多 个 帧 .然后 右 击 并 在 弹出 的 菜单 中 执行 【复制 帧 】 命 令 ， 即 可 复制 当前 选 





择 的 所 有 帧 。 
在 需要 粘贴 帧 的 
复制 的 帧 粘贴 或 覆盖 
(2) 删除 帧 
选择 时 间 轴 中 的 
所 有 帧 。 
(3) 移动 由 
选择 时 间 轴 中 的 
图 标 时 ， 单 击 鼠标 并 
(4) 更 改 帧 序列 




















位 置 选择 一 个 或 多 个 帧 ， 然 后 右 击 并 在 弹出 的 菜单 中 执行 【粘贴 帧 】 命 令 ， 即 可 将 
到 该 位 置 。 











一 个 或 多 个 帧 ， 右 击 并 在 弹出 的 菜单 中 执行 【删除 帧 】 命 令 ， 即 可 删除 当前 选择 的 


一 个 或 多 个 连续 的 帧 ， 将 鼠标 放置 在 所 选 帧 的 上 面 ， 当 光标 的 右 下 方 出 现 一 个 矩形 
拖 动 至 目标 位 置 ， 即 可 移动 当前 所 选择 的 所 有 帧 。 
的 长 度 


将 光标 放置 在 帧 序列 的 开始 帧 或 结束 帧 处 ， 按 住 Ctrl 键 使 光标 改变 为 左右 箭头 图 标 时 ， 向 左 或 向 右 





拖 动 即 可 更 改 帧 序 殉 


的 长 度 。 例 如 ,将 光标 放置 在 时 间 轴 中 的 第 30 帧 处 ， 按 住 Ctrl 键 不 放 并 向 右 拖 动 至 


第 45 帧 ， 即 可 延长 该 帧 序列 的 长 度 至 45 帧 。 如 果 将 光标 向 左 拖 动 至 第 20 帧 处 ， 即 可 缩短 当前 帧 序列 的 


长 度 至 20 帧 。 


24.3 


在 制作 动画 时 ， 


使 用 元 件 可 以 提高 编辑 动画 的 效率 ， 使 创建 复杂 的 交互 效果 变 得 更 加 容易 。 如 果 想 





更 改动 画 中 的 重复 元 素 ， 只 需要 修改 元 件 ， Flash 将 自动 更 新 所 有 应 用 该 元 件 的 实例 。 本 节 主 要 讲述 创建 





元 件 和 编辑 元 件 ， 用 





户 通过 学 习 本 节 内 容 为 网 站 建设 奠定 基础 。 


24.3.1 创建 元 件 


要 创建 元 件 .可 以 执行 【插入 】| 【新 建 元 件 】 命 令 (或 按 组 合 键 Chlt+F8)， 打开 【创建 新 元 件 】 对 
话 框 。 在 对 话 框 的 【类 型 】 下 拉 列 表 中 包括 不 同 的 元 件 类 型 。 
影片 剪辑 : 该 元 件 用 于 创建 可 重用 的 动画 片段 。 影 片 剪 辑 拥有 各 自 独 立 于 主 时 间 轴 的 多 帧 时 间 轴 。 


用 户 可 以 将 多 帧 时 间 
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轴 看 作 是 谋 套 在 主 时 间 轴 内 的 . 它们 可 以 包含 交互 式 控件 、 声 音 甚至 影片 剪辑 实例 
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也 可 以 将 影片 剪辑 实例 放 在 按钮 元 件 的 时 间 轴 内 .以 创建 动画 按钮 。 此 外 . 可 以 使 用 ActionScipt 对 影片 
剪辑 进行 改编 。 

按钮 :该 元 件 用 于 响应 鼠标 单 击 、 滑 过 或 其 他 动作 的 交互 式 按钮 。 可 以 定义 与 各 种 状态 关联 的 图 形 ， 
然后 将 动作 指定 给 按钮 实例 。 
图 形 : 该 元 件 可 用 于 创建 链接 到 主 时 间 轴 的 可 重用 动画 片段 ,图 形 元 件 与 主 时 间 轴 同步 运行 。 另 外 ， 
交互 式 控件 和 声音 在 图 形 元 件 的 动画 序列 中 不 起 作用 。 
1. 创建 图 形 元 件 

创建 图 形 元 件 的 对 象 可 以 是 导入 的 位 图 图 像 、 矢 量 图 像 、 文 本 对 象 以 及 用 Flash 工具 创建 的 线条 、 色 
块 等 。 在 Flash 中 ， 要 创建 图 形 元 件 可 以 通过 两 种 方式 。 一 种 是 按 Ctrl+F8 组 合 键 , 打开 【创建 新 元 件 】 
对 话 框 。 在 【类 型 】 下 拉 列 表 中 选择 【图 形 】 选 项 , 创建 “元 件 1” 图形 元 件 . 即 可 在 其 中 绘制 图 形 对象 。 

另 一 种 是 选择 相关 元 素 , 执行 【修改 】|【 转 换 为 元 件 】 命 令 (快捷 键 F8) ， 弹 出 【转换 为 元 件 】 对 
话 框 。 在 【类 型 】 下 拉 列 表 中 选择 【图 形 】 选 项 单 击 【 确 定 】 按 钮 ， 这 时 在 场景 中 的 元 素 变 成 了 元 件 。 
无 论 是 【创建 新 元 件 】 对 话 框 ， 还 是 【转换 为 元 件 】 对 话 框 ， 对话 框 中 的 选项 基本 相同 。 当 单 击 【 库 根 
目录 】 选 项 时 ， 会 弹出 【 移 至 】 对 话 框 ， 将 元 件 保存 在 新 建文 件 夹 或 者 现 有 的 文件 夹 中 。 

元 件 默认 的 注册 点 为 左上 角 ， 如 果 在 对 话 框 中 单 击 注册 的 中 心 点 ， 那 么 元 件 的 中 心 点 会 与 图 形 中 心 
点 重合 。 
2. 创建 影片 剪辑 元 件 

影片 剪辑 元 件 就 是 我 们 平时 常 说 的 MC (Movie Clip)。 通 常 ， 可 以 把 场景 上 任何 看 得 到 的 对 象 ， 甚 
至 整个 【时 间 轴 】 内 容 创 建 为 一 个 MC. 而 且 可 以 将 这 个 MC 放置 到 另 一 个 MC 中 。 在 Flash 中 ,创建 影 
片 剪 辑 元 件 的 方法 与 图 形 元 件 的 创建 方法 相似 ， 不 同 是 在 【创建 新 元 件 】 或 【转换 为 元 件 】 对话 框 中 
选择 【类 型 】 下 拉 列 表 中 的 【影片 剪辑 】 选 项 即 可 。 

































































在 Flash 中 ， 用 户 可 以 创建 带动 画 效 果 的 “影片 剪辑 ”元 件 ， 此 类 元 件 的 创建 方法 将 在 后 面 的 


章节 进行 详细 的 介绍 。 





3. 创建 按钮 元 件 

在 Flash 中 ,创建 按钮 元 件 的 对 象 可 以 是 导入 的 位 图 图 像 、 矢 量 图 形 、 文 本 对 象 以 及 用 Flash 工具 创 
建 的 任何 图 形 。 

要 创建 按钮 元 件 ， 可 以 在 打开 的 【创建 新 元 件 】 或 【转换 为 元 件 】 对 话 框 中 ,选择 【类 型 】 列 表 中 
的 【按钮 】 选 项 ， 并 单 击 【确定 】 按 钮 ， 进 入 按钮 元 件 的 编辑 环境 。 

按钮 元 件 除 了 拥有 图 形 元 件 全 部 的 变形 功能 外 ， 其 特殊 性 还 在 于 它 具有 4 个 状态 帧 ， 分 别 是 弹 起 、 
指针 经 过 、 按 下 和 点 击 。 

在 前 三 个 状态 帧 中 ,可 以 放置 除了 按钮 元 件 本 身 外 的 所 有 Flash 对 象 . 在 【点 击 】 中 的 内 容 是 一 个 图 
形 ， 该 图 形 决定 着 当 鼠 标 指向 按钮 时 的 有 效 范围 。 它 们 各 自 的 功能 如 下 所 示 。 

弹 起 : 该 帧 代表 指针 没有 经 过 按钮 时 该 按钮 的 状态 。 

指针 经 过 : 该 帧 代表 当 指 针 滑 过 按钮 时 ， 该 按钮 的 外 观 。 

按 下 : 该 帧 代表 单 击 按钮 时 .该 按钮 的 外 观 。 

点 击 : 该 帧 用 于 定义 响应 鼠标 单 击 的 区 域 。 此 区 域 在 SWF 文件 中 是 不 可 见 的 。 
































时 
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选中 “指针 经 过 ”动画 帧 .并 执行 【修改 】| 【时 间 轴 】| 【转换 为 关键 帧 】 命 令 (或 按 快捷 键 F6) . 
Flash 会 插入 复制 了 “ 弹 起 ”动画 帧 内 容 的 关键 帧 。 然 后 再 编辑 该 图 形 ， 使 其 有 所 区 别 。 最 后 使 用 同样 的 
方法 ， 来 创建 【 按 下 】 状 态 和 【点 击 】 状 态 下 的 图 形 效果 。 

创建 好 按钮 元 件 后 ， 并 且 将 该 按钮 元 件 放置 在 场景 中 .执行 【控制 】|【 测 试 影片 】 命 令 (或 按 组 合 
键 CtrltEnter) ， 即 可 通过 鼠标 的 指向 与 单 击 查看 按钮 的 不 同 状态 效果 。 


24.3.2 ”编辑 元 件 


对 于 创建 好 的 元 件 . 用 户 还 可 以 对 其 进行 编辑 。 编 辑 元 件 时 . Flash 将 更 新 文档 中 该 元 件 的 所 有 实例 . 
以 反映 编辑 的 结果 。 
1. 在 当前 位 置 编辑 元 件 

在 舞台 中 双击 某 个 元 件 实例 ， 即 可 进入 元 件 编辑 模式 。 此 时 ， 其 他 对 象 以 灰 度 方式 显示 ， 以 利于 和 
正在 编辑 的 元 件 区 别 开 来 。 同 时 ， 正 在 编辑 的 元 件 名 称 显示 在 舞台 上 方 的 编辑 栏 内 ， 它 位 于 当前 场景 名 
称 的 右 侧 。 

此 时 . 用户 可 以 根据 需要 编辑 该 元 件 。 编 辑 好 元 件 后 . 单 击 【 返 回 】 按 钮 外， 或 者 在 空白 区 域 双击 
即 可 返回 场景 。 
2. 在 新 窗口 中 编辑 元 件 

在 新 窗口 中 编辑 元 件 ， 是 指 在 一 个 单独 的 窗口 中 编辑 元 件 。 在 单独 的 窗口 中 编辑 元 件 时 ， 可 以 同时 
看 到 该 元 件 和 主 时 间 轴 。 正 在 编辑 的 元 件 名 称 会 显示 在 舞台 上 方 的 编辑 栏 内 。 在 舞台 上 ， 选 择 该 元 件 的 
一 个 实例 ， 右 击 选择 【在 新 窗口 中 编辑 】 命 令 ， 进 入 新 窗口 编辑 模式 。 

编辑 好 元 件 后 ， 单 击 窗口 右上 角 的 【关闭 】 按 钮 国 | 关闭 新 窗口 。 然 后 在 主 文档 窗口 内 单 击 . 返回 到 
编辑 主 文档 状态 下 。 


24.4 


滤 镜 是 Flash 动画 中 一 个 重要 的 组 成 部 分 ， 用 于 为 动画 添加 简单 的 特效 ， 如 投影 、 模 糊 、 发 光 、 斜 角 
等 ， 使 动画 表现 得 更 加 丰富 、 真 实 。 用 户 通过 本 节 的 学 习 可 以 在 网 站 建设 中 随心 所 欲 地 进行 滤 镜 设置 。 


24.4.1 ”Flash 滤 镜 概述 


在 Flash 中 , 使 用 滤 镜 可 以 为 文本 、 按 钮 和 影片 剪辑 添加 有 趣 的 视觉 效果 . 使 得 应 用 滤 镜 的 对 象 呈现 
立体 效果 ,或 者 发 光 等 效果 。 
1. 应 用 与 删除 滤 镜 

要 使 用 滤 镜 功能 . 需要 先 在 舞台 上 选择 文本 、 按 钮 或 影片 剪辑 对 象 。 然 后 单 击 【 属 性 】 面 板 底部 的 
【添加 滤 镜 】 按 钮 馈 ， 选 择 相应 的 滤 镜 选项 ， 即 可 为 选中 对 象 添加 滤 镜 效果 。 

一 个 对 象 可 以 添加 多 个 滤 镜 选项 ， 而 当 添 加 一 个 滤 镜 选项 后 ， 只 要 单 击 【属性 】 面 板 底部 的 【删除 
滤 镜 】 按 钮 ， 即 可 删除 添加 的 滤 镜 选项 ; 如 果 添 加 了 多 个 滤 镜 选项 ， 只 要 单 击 选 中 某 个 滤 镜 选项 ， 单 击 
【删除 滤 镜 】 按 钮 ， 即 可 删除 选 定 的 滤 镜 选项 。 
2. 复制 与 粘贴 滤 镜 

要 想 将 设置 好 的 滤 镜 效果 应 用 到 其 他 对 象 中 .可 以 通过 复制 功能 来 实现 。 方 法 是 : 选中 要 复制 滤 镜 
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选项 的 对 象 . 单 击 【属性 】 面 板 底部 的 【剪贴 板 】 按 钮 . 选择 【复制 所 选 】 命 令 。 然 后 选中 其 他 对 象 , 
再 次 单 击 该 按钮 ， 选择 【粘贴 】 命 令 ， 即 可 添加 相同 效果 的 滤 镜 。 
3. 启用 与 禁用 滤 镜 


当 添 加 滤 镜 效果 后 ， 想 要 临时 显示 添加 之 前 的 效果 时 ， 可 以 通过 禁用 滤 镜 功能 。 要 想 临 时 隐藏 一 个 


滤 镜 效果 ， 可 以 选中 该 滤 镜 选项 ， 通 过 单 击 【 属 性 】 面 板 底部 的 【启用 或 禁用 滤 镜 】 按 钮 来 实现 ; 当 想 
要 临时 隐藏 某 个 对 象 的 所 有 滤 镜 效果 时 ， 可 以 单 击 【 添 加 滤 镜 】 按 钮 ， 选择 【禁用 全 部 】 命 令 来 实现 。 
4. 应 用 预 设 滤 镜 





在 Flash 中 虽然 可 以 为 对 象 添加 预 设 滤 镜 效果 ,但 是 滤 镜 的 预 设 选项 需要 提前 设置 。 方 法 是 : 选中 某 


个 对 象 的 滤 镜 选项 单 击 【 属 性 】 面 板 底部 的 【 预 设 】 按 钮 ， 选择 【另存 为 】 命 令 ， 在 弹出 的 【将 预 设 
另存 为 】 对 话 框 的 【 预 设 名 称 】 文 本 框 中 输入 预 设 滤 镜 名 称 。 











然后 选中 其 他 对 象 ， 再 次 单 击 该 按钮 ， 选 择 新 增 的 预 设 滤 镜 名 称 命令 ， 即 可 应 用 预 设 滤 镜 。 要 想 为 











保存 后 的 预 设 滤 镜 更 改名 称 ， 可 以 单 击 【 预 设 】 按 钮 ， 选择 【 重 命名 】 命 令 。 在 弹出 的 【 重 命名 预 设 】 
对 话 框 中 双击 预 设 名 称 ， 重 新 设置 名 称 后 ， 单 击 【 重 命名 】 按 钮 ， 即 可 改变 。 


24.4.2 ”投影 滤 镜 








投影 滤 镜 是 模拟 对 象 ， 投 影 到 一 个 表面 的 效果 。 要 想 为 影片 剪辑 、 按 钮 或 文字 添加 投影 效果 ， 只 


选中 其 中 一 个 对 象 后 ， 单 击 【 属 性 】 面 板 底部 的 【添加 滤 镜 】 按 钮 加 ,选择 【投影 】 命 令 ， 即 可 添加 默 
认 的 投影 效果 。 添 加 投影 滤 镜 后 ， 可 以 通过 【 滤 镜 】 选 项 组 中 的 参数 来 设置 投影 的 效果 ， 其 中 各 个 选项 
的 功能 如 下 。 


最 佳 的 回放 性 能 。 








模糊 : 该 选项 用 于 控制 投影 的 宽度 和 高 度 。 
强度 该 选项 用 于 设置 阴影 的 明暗 度 ， 数 值 越 大 ， 阴 影 就 越 暗 。 
品质 ;该 选项 用 于 控制 投影 的 质量 级 别 ， 设置 为 【高 】 则 近似 于 高 斯 模糊 ， 设 置 为 【 低 】 可 以 实现 


颜色 : 单 击 此 处 的 色 块 ， 可 以 打开 【颜色 拾取 器 】， 可 以 设置 阴影 的 颜色 。 

角度 : 该 选项 用 于 控制 阴影 的 角度 ， 在 其 中 输入 一 个 值 或 单 击 角 度 选取 器 并 拖 动 角度 盘 。 
距离 ， 该 选项 用 于 控制 阴影 与 对 象 之 间 的 距离 。 

挖 空 ， 启 用 此 复 选 框 ， 可 以 从 视觉 上 隐藏 源 对 象 ， 并 在 挖 空 图 像 上 只 显示 投影 。 

内 侧 阴 影 : 启用 此 复 选 框 ， 可 以 在 对 象 边界 内 应 用 阴影 。 

隐藏 对 象 : 启用 此 复 选 框 ， 可 以 隐藏 对 象 并 只 显示 其 阴影 ,从 而 可 以 更 轻松 地 创建 逼真 的 阴影 。 














24.4.3 ”模糊 滤 镜 


模糊 滤 镜 可 以 柔 化 对 象 的 边缘 和 细节 。 将 模糊 应 用 于 对 象 ， 可 以 让 它 看 起 来 好 像 位 于 其 他 对 象 的 后 





面 ， 或 者 使 对 象 看 起 来 好 像 是 运动 的 。 当 添加 模糊 滤 镜 效果 后 ， 默 认 的 参数 即 可 得 到 模糊 效果 。 该 滤 镜 


二 





的 参数 与 投影 滤 镜 中 的 基本 相同 .只 是 后 者 模糊 的 是 投影 效果 ， 前 者 模糊 的 是 对 象 本 身 。 


24.4.4 发光 与 渐 变 发 光 滤 镜 


使 用 发 光 滤 镜 ， 可 以 为 对 象 的 周边 应 用 颜色 ,使 当前 对 象 赋予 光 旱 效果 : 而 应 用 渐变 发 光 ， 可 以 在 


发 光 表 面 产生 带 渐变 颜色 的 发 光 效 果 。 
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1. 发 光 滤 镜 

添加 发 光 滤 镜 后 ,发现 其 中 的 参数 与 投影 滤 镜 参数 相似 ， 只 是 没有 【距离 】 【角度 】 等 参数 ， 而 其 
默认 发 光 颜 色 为 红色 。 在 参数 列表 中 ， 唯一 不 同 的 是 【内 发 光 】 选 项 ， 当 启用 该 选项 后 ， 即 可 将 外 发 光 
效果 更 改 为 内 发 光 效 果 。 
2. 渐变 发 光 滤 镜 

渐变 发 光 与 发 光 滤 镜 的 不 同 是 ,发光 颜 色 为 渐变 颜色 ， 而 不 是 单 色 。 虽 然 在 默认 情况 下 ， 其 效果 与 
投影 效果 相似 ， 但 是 其 发 光 颜 色 为 渐变 颜色 。 渐 变 发 光 颜 色 的 设置 ， 与 【颜色 】 面 板 中 渐变 颜色 的 设置 
方法 相同 。 但 是 渐变 发 光 要 求 渐变 开始 处 颜色 的 Alpha 值 为 0, 并 且 不 能 移动 此 颜色 的 位 置 . 但 可 以 改变 
该 颜色 。 在 渐变 发 光 滤 镜 中 ,还 可 以 设置 发 光 效果 .只 要 在 【类 型 】 下 拉 列 表 中 选择 不 同 的 子 选项 即 可 . 
默认 情况 下 为 【外 侧 】。 


24.4.5 ”和 斜 角 与 渐变 斜 角 滤 镜 


应 用 斜 角 就 是 向 对 象 应 用 加 亮 效 果 ， 使 其 看 起 来 凸 出 于 背景 表面 ， 而 应 用 渐变 斜 角 可 以 产生 一 种 凸 
起 效果 ， 使 得 对 象 看 起 来 好 像 从 背景 上 凸 起 ， 且 斜 角 表 面 有 渐变 颜色 。 
1. 斜 角 滤 镜 

斜 角 滤 镜 中 的 参数 在 投影 的 基础 上 ， 添 加 了 【阴影 】 和 【加 亮 显示 】 颜 色 控件 。 当 添加 斜 角 滤 镜 后 . 
【阴影 】 和 【加 亮 显示 】 的 默认 颜色 为 黑色 和 白色 。 如 果 设置 这 两 个 颜色 控件 ， 那 么 会 得 到 不 同 的 立体 效 
果 。 而 列表 中 的 【类 型 】 下 拉 列 表 中 的 子 选项 是 用 来 设置 不 同 的 立体 效果 的 。 
2. 渐变 斜 角 滤 镜 

渐变 斜 角 滤 镜 中 的 参数 ， 只 是 将 斜 角 滤 镜 中 的 【阴影 】 和 【加 亮 显示 】 颜 色 控件 替换 为 渐变 颜色 控 
件 ， 所 以 渐变 斜 角 立 体 效 果 是 通过 渐变 颜色 来 实现 的 。 而 在 渐变 颜色 编辑 条 中 ， 需 要 注意 的 是 渐变 斜 角 
要 求 渐变 中 间 有 一 种 颜色 的 Alpha 值 为 0。 


24.4.6 ”调整 颜色 滤 镜 


应 用 调整 颜色 滤 镜 ， 可 以 调整 对 象 的 对 比 度 、 亮 度 、 饱 和 度 与 色相 。 其 中 ， 对 于 位 图 的 应 用 尤为 
显著 。 

对 比 度 : 用 于 调整 图 像 的 加 亮 、 阴 影 及 中 调 。 

亮度 :用 于 调整 图 像 的 亮度 。 

饱和 度 : 用 于 调整 颜色 的 强度 。 

色相 : 用 于 调整 颜色 的 深浅 。 


24.5 


在 Flash 中 , 除了 可 以 制作 逐 帧 动画 外 . 还 可 以 制作 三 种 补 间 动 画 ， 即 传统 补 间 动 画 、 补 间 形 状 动画 
和 补 间 动 画 。 它 们 帮助 设计 者 在 动画 中 方便 快速 地 制作 各 种 效果 。 而 补 间 动 画 与 逐 帧 动画 的 不 同 之 处 在 
于 它 只 需要 定义 动画 的 起 始 和 结束 两 个 关键 帧 内 容 . 这 两 个 关键 帧 之 间 的 过 渡 帧 是 由 Flash 自动 创建 的 。 
用 户 通过 学 习 可 以 知道 补 间 动 画 与 逐 帧 动画 的 区 别 。 
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24.5.1 补 间 动 画 概述 


补 间 动 画 是 计算 机 动画 领域 的 一 个 术语 ， 是 计算 机 根据 两 个 关键 帧 而 自动 制作 的 动画 。 补 间 动 画 是 
计算 机 动画 技术 的 一 项 突破 性 进展 ， 其 简化 了 动画 制作 的 过 程 ， 降 低 了 动画 制作 的 难度 。 
1. 补 间 动画 的 组 成 

Flash 是 目前 应 用 最 广泛 的 二 维 补 间 动 画 制 作 工具 .使 用 Flash 制作 的 完整 补 间 动画 往往 包括 三 个 
部 分 。 

(1) 首 关键 帧 

首 关键 帧 是 补 间 动 画 播放 前 显示 的 帧 ， 是 补 间 动 画 的 起 始 帧 ， 是 动作 的 开始 。 

(2) 尾 关键 帧 

尾 关键 帧 是 补 间 动 画 播放 结束 后 显示 的 帧 ， 是 补 间 动 画 的 结束 帧 ， 是 动作 的 末尾 。 

(3) 补 间 帧 

补 间 帧 是 计算 机 根据 补 间 动 作 , 绘制 的 从 首 关键 帧 变化 到 尾 关键 帧 整个 过 程 的 中 间 画 。 补 间 帧 越 多 , 
则 表示 描述 补 间 动作 的 过 程 越 精细 。 
2. 补 间 动作 的 分 类 

补 间 动作 是 补 间 动 画 的 灵魂 。 只 有 设置 补 间 动 作 后 ,计算 机 才能 根据 用 户 定义 的 动作 创建 补 间 。 

(1) 位 置 补 间 

位 置 补 间 是 指 描述 动画 元 件 的 位 置 变化 状况 的 补 间 动 作 ， 是 最 常见 的 补 间 动 作 之 一 。 

(2) 缩放 补 间 

缩放 补 间 是 指 描 述 元 件 的 水 平 缩放 比率 或 垂直 缩放 比率 的 动作 。 在 缩放 补 间 动 作 进 行 时 ， 既 可 将 水 
平 与 垂直 缩放 等 比例 进行 ， 也 可 分 别 缩放 不 同 的 比率 。 

(3) 倾斜 补 间 

倾斜 补 间 是 指 描述 元 件 根据 指定 角 的 方向 拉 促 或 缩 进 ， 模 拟 元 件 3D 旋转 效果 的 动作 。 

倾斜 补 间 的 倾斜 动作 包括 水 平角 度 倾斜 和 垂直 角度 倾斜 等 ， 可 以 模拟 两 种 不 同 的 3D 旋转 的 方向 。 

(4) 旋转 补 间 

旋转 补 间 是 指 描述 元 件 根 据 指定 的 中 心 点 进行 旋转 的 动作 。 旋 转 补 间 也 是 比较 常见 的 补 间 方 式 。 

(5) 颜色 补 间 

颜色 补 间 是 指 描述 元 件 在 影片 中 发 生 的 明度 、 色 度 、 亮 度 以 及 透明 度 等 所 发 生 的 改变 动作 。 

(6) 滤 镜 补 间 

滤 镜 补 间 是 记录 元 件 中 应 用 的 滤 镜 的 属性 改变 行为 。 


24.5.2 ”创建 传统 补 间 动 画 


Flash 软件 创建 的 补 间 动 画 称 作 传 统 补 间 动画 ， 即 非 面 向 对 象 运动 的 补 间 动 画 。 传 统 补 间 动 画 并 非 基 
于 某 一 个 元 件 ， 而 是 基于 某 个 层 中 的 所 有 内 容 。 
1. 创建 传统 补 间 动 画 

传统 补 间 动 画 支持 设置 图 层 中 元 件 的 各 种 属性 .包括 颜色 、 大 小 、 位 置 和 角度 等 ， 同 样 也 可 以 为 这 
些 属性 建立 一 个 变化 的 关系 。 创 建 传统 补 间 动 画 的 方式 与 创建 补 间 动画 有 一 定 的 区 别 。 

首先 ， 用 户 需要 先 创建 图 层 ， 并 在 图 层 上 绘制 或 导入 元 件 。 然 后 ， 即 可 为 图 层 添加 普通 帧 (用 于 补 
间 ) 和 尾 关键 帧 。 选 中 用 于 任意 一 个 用 于 补 间 的 普通 帧 .然后 右 击 . 执行 【创建 传统 补 间 】 命 令 ， 为 两 
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个 关键 帧 之 间 的 各 普通 帧 创建 传统 补 间 .此 时 . 首 关键 帧 和 补 间 帧 均 会 转换 为 紫色 。 
2. 设置 传统 补 间 旋 转动 作 

在 Flash 中 ， 人 允许 用 户 在 【属性 】 面 板 中 为 传统 补 间 动 画 设置 旋转 以 及 缓 动 等 动作 。 

(1) 设置 缓 动 

为 传统 补 间 动 画 设置 缓 动 有 两 种 方法 。 选 中 补 间 帧 .然后 直接 在 【属性 】|【 补 间 】|【 绥 动 】 右 侧 单 
击 蓝 色 横 线 .输入 缓 动 的 幅度 数字 。Flash 将 自动 把 缓 动 应 用 于 元 件 中 。 

除了 输入 元 件 缓 动 的 幅度 值 以 外 .Flash 还 允许 用 户 通过 可 视 化 的 界面 设置 缓 动 。 例 如 .选中 任意 补 
间 帧 ， 在 【属性 】 面 板 中 单 击 【 补 间 】|【 编 辑 缓 动 】 按 钮 图 。 

然后 , 在 弹出 的 【 自 定义 缓 入 / 组 出 】 对 话 框 中 . 用 鼠标 单 击 缓 动 的 矢量 速度 端点 ,对 其 进行 拖 外 . 
以 实现 基于 缓 动 的 旋转 动画 。 在 完成 缓 动 设置 后 ， 即 可 单 击 【 确 定 】 按 钮 。 

(2) 设置 旋转 方向 

Flash 允许 用 户 自 定义 元 件 旋转 的 方向 ， 包 括 自 动 设置 、 顺 时 针 和 逆 时 针 三 种 。 在 【时 间 轴 】 面 板 中 
选择 任意 一 个 补 间 帧 ， 然 后 ， 即 可 在 【属性 】|【 补 间 】|【 选 中 】 的 下 拉 列 表 菜单 中 修改 【无 】 为 自 定义 
的 旋转 方向 ， 以 及 右 侧 的 旋转 次 数 。 

(3) 其 他 旋转 设置 

除了 组 动 和 旋转 方向 外 .Flash 还 在 【属性 】 面 板 中 提供 了 其 他 一 些 旋转 的 选项 。 选 中 任意 补 间 帧 ， 
即 可 进行 其 他 旋转 设置 ， 如 表 24-1 所 示 。 


表 24-1 其 他 旋转 设置 












































设置 元 件 的 位 置 贴 紧 到 辅助 线 上 
设置 元 件 的 各 补 间 帆 同步 移动 


调整 到 路 径 设置 元 件 按照 指定 的 路 径 旋 转 
设置 元 件 在 旋转 时 自动 缩放 





24.5.3 ”创建 补 间 形 状 动画 


补 间 形 状 动画 也 是 在 Flash CS3 及 之 前 版 本 就 已 提供 的 补 间 动 画 类 型 。 在 补 间 形 状 动画 中 ， 以 两 个 关 
键 帧 中 的 笔触 和 填充 为 运动 的 基本 单位 。 所 有 变化 都 围绕 着 这 两 个 帧 中 的 笔触 和 填充 展开 。 

1. 创建 补 间 形 状 

Flash 可 以 方便 地 将 任何 打 散 的 图 形制 作为 补 间 形状 动画 。 在 Flash 文档 中 新 建 图 层 ， 然 后 在 图 层 上 
绘制 三 个 关键 帧 的 元 件 。 然 后 ， 即 可 分 别 在 三 个 关键 帧 之 间 插 入 6 个 普通 帧 ,将 三 个 关键 帧 之 间 的 距离 
拉 开 。 

在 第 1 个 和 第 2 个 关键 帧 中 选择 任意 一 个 普通 帧 ， 右 击 执行 【创建 补 间 形 状 】 命 令 ， 即 可 将 普通 帧 
转换 为 补 间 形 状 帧 。 用 同样 的 方式 ， 即 可 为 后 面 两 个 关键 帧 之 间 的 普通 帧 创建 补 间 形 状 。 在 创建 补 间 形 
状 后 ， 即 可 浏览 补 间 形 状 动画 。 

2. 设置 补 间 形 状 属性 

Flash 不 仅 允许 用 户 制作 补 间 形 状 动画 .还 支持 设置 补 间 形 状 的 【 缓 动 】 和 【混合 】 等 属性 。 补 间 形 
状 的 缓 动 与 传统 补 间 动 画 的 缓 动 类 似 ， 都 是 通过 改变 动画 补 间 的 变化 速度 .制作 出 特殊 的 视觉 效果 。 

在 Flash 中 选中 补 间 形状 所 在 的 帧 .然后 可 在 【属性 】 面 板 中 的 【 缓 动 】 内 容 右 侧 数 字 上 双击 . 修改 
缓 动 的 级 别 。【 混 合 】 的 作用 是 设置 变形 的 过 渡 模 式 。 在 Flash 中 选中 补 间 形 状 所 在 的 帧 , 即 可 在 【属性 】 
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面板 中 对 其 进行 设置 。 在 补 间 形 状 的 两 种 过 渡 模 式 中 .【 分 布 式 】 选 项 可 使 补 问 帧 的 形状 过 渡 更 加 光滑 : 
【角形 】 选 项 可 使 补 间 正 的 形状 保持 棱角 . 适用 于 有 尖锐 棱角 的 图 形变 换 。 


24.5.4 ”创建 传统 运动 引导 层 补 间 动 画 


传统 运动 引导 动画 是 传统 补 间 动 画 的 一 种 延伸 。 在 传统 运动 引导 动画 中 .用 户 可 以 以 辅助 线 作为 运 
动 路 径 ， es 要 创建 传统 运动 引导 动画 ， 首 先 需要 创建 两 个 图 层 。 一 个 是 
统 运动 引导 层 . 负责 存放 引导 的 辅助 线 ， 另 一 个 则 是 普通 图 层 ， 用 于 存放 被 引导 的 对 象 。 

首先 ， or 同时 制作 浮动 的 气泡 元 件 。 创 建 传 统 运动 引导 层 ， 将 气泡 元 
件 所 在 的 图 层 拖 投 到 引导 层 之 下 。 然 后 ， 分 别 为 各 图 层 添 加 若干 普通 帧 ， 在 引导 层 中 绘制 气泡 元 件 的 移 
动 轨迹 线 。 将 气泡 所 在 的 图 层 最 后 一 帧 转换 为 关键 帧 , 人 人 
拖 奥 到 运动 轨迹 线 的 两 端 ， 锁 定 引 导 层 。 最 后 .选中 气泡 所 在 的 图 层 中 的 任意 一 个 普通 帧 ,执行 【创建 
传统 补 间 】 命 令 ， 即 可 完成 传统 运动 引导 动画 的 制作 。 


24.5.5 创建 遮 罩 动 画 


遮 站 动画 是 补 间 动 画 的 一 种 特殊 形式 。 在 遮 曾 动画 中 ， 动 画 的 各 种 普通 层 被 覆盖 在 庶 章 层 下 ， 只 有 
被 遮 曾 层 中 图 像 庶 住 的 动画 内 容 才 能 在 影片 中 显示 。 
1. 制作 普通 遮 罩 动画 
普通 遮 晶 动 画 是 指 在 遮 曾 层 覆 盖 下 的 动画 。 在 这 些 动画 中 . 遮 淖 层 是 静止 的 , 遮 章 层 下 方 的 被 庶 晶 
层 则 是 运动 的 。 
制作 遮 曙 动画 ， 既 可 以 用 普通 补 间 动画 ， 也 可 以 用 传统 补 间 动 画 。 以 普通 补 间 动 画 为 例 ， 先 制作 一 
段 场景 自 右 向 左 平移 的 动画 ， 作 为 遮 淖 动 画 的 动画 部 分 。 然 后 ， 即 可 隐藏 动画 所 在 的 层 ， 分 别 为 影片 导 
入 背景 、 显 示 动画 的 元 素 等 内 容 。 新 建 “ 遮 曾 ” 图 层 ， 在 图 层 中 绘制 一 个 圆 形 作为 庶 章 图 形 ， 然 后 将 其 
移动 到 动画 上 方 。 在 “ 遮 单 ”图 层 的 名 称 上 方 右 击 ， 执行 【 庶 淖 层 】 命 令 ，Flash 将 自动 把 其 下 方 的 “图 
像 ” 图 层 纳入 遮 章 的 范围 中 ， 完 成 动画 制作 。 
2. 制作 遮 罩 层 动画 
遮 罩 层 动画 是 指 在 诞 章 层 中 发 生 的 动画 ， 即 根据 诞 章 图 形 本 身 的 动作 而 实现 的 动画 。 遮 重 层 动画 的 
应 用 非常 广泛 ， 在 网 页 中 的 各 种 水 波 荡漾 、 百 叶 窗 等 动画 都 是 遮 罩 层 动画 。 
制作 遮 重 层 动画 ， 需 要 先 为 Flash 影片 导入 遮 章 层 动画 的 背景 。 然后, 即 可 在 图 像 所 在 图 层 上 方 新 建 
一 个 图 层 ， 并 在 图 层 中 绘制 一 个 用 于 遮 罩 的 六 边 形 。 分 别 为 覆盖 和 背景 两 个 图 层 插入 一 些 普通 帧 ， 用 于 
制作 补 间 动 画 。 在 覆盖 图 层 的 最 后 1 帧 处 右 击 .执行 【转换 为 关键 帧 】 命 令 ， 将 其 转换 为 关键 帧 。 
在 覆盖 图 层 最 后 一 个 关键 帧 处 重新 绘制 一 个 矩形 ， 和 矩形 大 小 与 影片 的 场景 一 致 ， 并 将 整个 场景 完全 
覆盖 。 然 后 ， 即 可 选中 覆盖 图 层 中 的 任意 一 个 普通 帧 ， 右 击 执行 【创建 补 问 形状 】 命 令 。 最 后 ， 将 覆盖 
图 层 转 换 为 讶 章 层 ， 完 成 遮 罩 层 动画 的 制作 。 


24.6 


色彩 效果 、 动 画 编 辑 器 和 动画 预 设 被 广泛 应 用 于 各 种 Flash 动画 中 。 通 过 色彩 效果 更 改 实例 的 颜色 、 
透明 度 、 对 比 度 等 ， 可 以 使 其 具有 更 加 逼真 生动 的 形象 。 使 用 动画 编辑 器 调整 动画 曲线 ， 可 以 创建 特定 
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类 型 的 复杂 动画 效果 . 如 慢 进 快 出 、 快 进 慢 出 等 缓 动 效果 : 而 使 用 动画 预 设 . 可 以 将 Flash 中 预 设 的 动画 
特效 直接 应 用 在 普通 动画 上 ， 如 波形 、 脉 捕 、 烟 雾 等 。 


24.6.1 色彩 效果 


在 Flash 中 . 通过 【属性 】 面 板 中 的 【色彩 效果 】 选 项 可 以 为 每 个 元 件 实例 设置 透明 度 、 颜 色 等 效果 . 
并 且 这 些 效果 也 会 影响 元 件 内 部 的 位 图 图 像 。 
1. 亮度 

亮度 选项 用 于 调节 元 件 实例 的 相对 亮度 或 暗 度 , 度量 范围 是 从 黑 (-100%) 到 白 (100%)。 在 【色彩 效果 】 
选项 的 【样式 】 下 拉 列 表 中 选择 【亮度 】 选 项 ， 然 后 单 击 并 拖 动 三 角形 滑 块 ， 或 者 在 右 侧 的 文本 框 中 输 
入 一 个 数值 ， 即 可 改变 元 件 实例 的 亮度 。 
2. 色调 

色调 选项 用 于 使 用 相同 的 色相 为 实例 着 色 ， 度 量 范围 是 从 透明 (0%) 到 完全 饱和 (100%)。 在 【色彩 效 
果 】 选 项 的 【样式 】 下 拉 列 表 中 选择 【色调 】 选 项 ， 此 时 将 会 出 现 一 个 【颜色 拾取 器 】 按 钮 和 【色调 】、 
【 红 】、【 绿 】、【 蓝 】4 个 滑 块 。 单 击 【 样 式 】 下 拉 列 表 右 侧 的 【颜色 拾取 器 】 按 钮 ， 在 弹出 的 【颜色 】 面 
板 中 可 以 选择 一 种 色调 颜色 。 

此 除 之 外 ， 还 可 以 通过 拖 动 【 红 】、【 绿 】 和 【 蓝 】 三 个 选项 的 三 角形 滑 块 ,或 者 直接 在 其 右 侧 的 文 
本 框 中 输入 颜色 数值 ， 来 改变 元 件 实例 的 色调 。 当 色调 设置 完成 后 ， 可 以 通过 拖 动 【色调 】 选 项 的 三 角 
形 滑 块 ,或 者 直接 在 其 右 侧 的 文本 框 中 输入 百分比 ， 来 改变 实例 色调 的 饱和 度 。 
3. Alpha 

Alpha 选项 用 于 设置 元 件 实例 的 透明 度 ， 度 量 范围 是 从 透明 (0%) 到 不 透明 (100%)。 在 【色彩 效果 】 选 
项 的 【样式 】 下 拉 列 表 中 选择 Alpha 选项 ， 然 后 单 击 并 拖 动 三 角形 滑 块 .或 者 在 右 侧 的 文本 框 中 输入 百 
分 比 ， 即 可 改变 元 件 实例 的 Alpha 透明 度 。 
4. 高 多 

高 级 选项 用 于 调节 元 件 实例 的 红色 、 绿 色 、 蓝 色 和 透明 度 值 。 对 于 在 位 图 图 像 上 创建 和 制作 具有 微 
妙 色彩 效果 的 动画 ， 该 选项 非常 有 用 。 在 【色彩 效果 】 选 项 的 【样式 】 下 拉 列 表 中 选择 【高 级 】 选 项 . 
此 时 将 会 出 现 Alpha、【 红 】、【 绿 】 和 【 蓝 】4 个 子 选项 。 

通过 拖 动 左 侧 的 控件 可 以 按 指定 的 百分比 降低 或 增 大 颜色 或 透明 度 的 值 ， 拖 动 右 侧 的 控件 可 以 按 指 
定数 值 降低 或 增 大 颜色 或 透明 度 的 值 。 当 前 的 红 、 绿 、 蓝 和 Alpha 的 值 都 乘 以 百分比 值 ， 然 后 加 上 右 列 
中 的 常数 值 ， 产 生 新 的 颜色 值 。 

例如 .如 果 当 前 的 红色 值 是 100. 将 左 侧 的 滑 块 设置 为 50%. 并 将 右 侧 滑 块 设置 为 100， 则 会 产生 一 
个 新 的 红色 值 150， 计算 方 法 为 。 













































































(100x 0.5)+100=150 


24.6.2 ”动画 编辑 器 


通过 【动画 编辑 器 】 面 板 ， 可 以 查看 所 有 补 间 属性 及 其 属性 关键 帧 。 它 还 提供 了 向 补 间 添 加 精度 和 
详细 信息 的 工具 。 动 画 编辑 器 显示 当前 选 定 的 补 间 的 属性 。 在 时 间 轴 中 创建 补 间 后 ,动画 编辑 器 允许 以 
多 种 不 同 的 方式 来 控制 补 间 。 

1. 添加 和 删除 属性 关键 帧 
在 【动画 编辑 器 】 面 板 中 .将 播放 头 拖 动 至 想 要 添加 关键 帧 的 位 置 。 然 后 ， 单 击 【 关 键 帧 】 选 项 中 
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的 【添加 或 删除 关键 帧 】 按 钮 ， 即 可 在 当前 位 置 添加 关键 帧 . 且 该 按钮 显示 为 一 个 黄色 的 菱形 图 标 。 

如 果 想 要 删除 某 一 个 关键 帧 ， 首 先 将 播放 头 拖 动 至 该 关键 帧 的 位 置 。 然 后 ， 单 击 【 关 键 帧 】 选 项 中 
的 【添加 或 删除 关键 帧 】 按 钮 . 即 可 删除 当前 位 置 的 关键 帧 ， 且 该 按钮 标 还 原 为 默认 的 尖 三 角 图 标 。 
2. 移动 属性 关键 帧 

如 果 想 要 将 属性 关键 帧 移动 至 补 间 内 其 他 帧 处 ， 只 需要 在 了 工 或 了 轴 曲 线 中 选择 该 关键 帧 的 节点 ， 然 
后 向 左 或 向 右 拖 动 至 目标 位 置 即 可 。 可 以 发 现 . 无论 移动 工 轴 还 是 工 轴 中 的 关键 帧 节点 ， 另 一 轴 中 的 关 
键 帧 节点 也 将 随 之 发 生 改 变 。 
3. 改变 元 件 实例 位 置 

通过 调节 工 或 了 轴 曲 线 中 关键 帧 节点 的 垂直 位 置 ， 可 以 改变 该 关键 帧 处 元 件 实例 的 位 置 。 

选择 代 或 了 轴 曲 线 中 的 关键 帧 节点 ， 并 沿 垂直 方向 向 上 或 向 下 拖 动 ， 即 可 改变 该 关键 帧 中 元 件 实例 
的 工 坐 标 和 了 坐标 。 
4. 转换 元 件 实例 形状 

在 【动画 编辑 器 】 面 板 中 可 以 更 改元 件 实例 的 倾斜 角度 和 缩放 比例 。 单 击 【 转 换 】 选 项 左 侧 的 小 三 
角形 按钮 ， 使 其 显示 出 【倾斜 】 子 选项 。 然 后 ,在 【倾斜 X】 和 【倾斜 Y】 选 项 的 右 侧 输入 度数 ,或 者 





使 用 同样 的 方法 ， 在 【缩放 X】 和 【缩放 Y】 选 项 的 右 侧 输入 百分比 ， 或 者 向 上 或 向 下 拖 动 曲线 图 








在 默认 情况 下 ， 曲 线 图 中 只 显示 补 间 范 围 内 的 起 始 关键 帧 和 结束 关键 帧 。 





5. 添加 和 删除 色彩 效果 

在 【动画 编辑 器 】 面 板 的 【色彩 效果 】 选 项 中 .可 以 为 元 件 实例 调整 Alpha、 亮 度 、 色 调和 高 级 颜色 。 
单 击 【色彩 效果 】 右 侧 的 加 号 按钮 ， 在 弹出 的 菜单 中 选择 想 要 更 改 的 选项 (如 色调 ) ， 然 后 在 出 现 的 列表 
中 设置 着 色 颜色 和 色调 数量 。 

如 果 想 要 删除 已 经 添加 的 色彩 效果 ， 则 可 以 单 击 【 色 彩 效果 】 右 侧 的 减 号 按钮 ， 在 弹出 的 菜单 中 选 
择 相应 的 选项 (如 已 经 添加 的 【色调 】 选 项 ) 即 可 。 
6. 添加 和 删除 滤 镜 效果 

除了 可 以 在 【属性 】 面 板 中 为 元 件 实例 添加 滤 镜 效果 外 .还 可 以 在 【动画 编辑 器 】 面 板 中 添加 。 单 
击 【 滤 镜 】 选 项 右 侧 的 【添加 滤 镜 】 按 钮 ， 在 弹出 的 菜单 中 选择 任意 一 个 滤 镜 效果 (如 模糊 ) 选项 ， 即 
可 为 元 件 实例 添加 模糊 滤 镜 效果 。 使 用 相同 的 方法 ， 可 以 为 元 件 实例 同时 添加 多 个 滤 镜 效果 。 

单 击 【 滤 镜 】 右 侧 的 【删除 滤 镜 】 按 钮 .在 弹出 的 菜单 中 选择 相应 的 滤 镜 选项 (如 已 经 添加 的 模糊 
滤 镜 ) ， 即 可 为 元 件 实例 删除 该 滤 镜 效果 。 
7. 为 补 间 添 加 缓 动 效果 

为 补 间 动画 添加 缓 动 效 果 . 可 以 改变 补 间 中 元 件 实例 的 运动 加 速度 . 使 其 运动 过 程 更 加 逼真 。 在 【组 
动 】 下 拉 菜 单 中 . 已 预 置 有 【简单 ( 慢 )】 的 缓 动 效果 ， 并 提供 了 缓 动 的 强度 百分比 。 除 此 之 外 ， 用 户 还 
可 单 击 【添加 缓 动 】 按 钮 ， 在 弹出 的 菜单 中 选择 其 他 类 型 的 缓 动 效果 。 


24.6.3 ”动画 预 设 
动画 预 设 是 预 配置 的 补 间 动 画 ， 可 以 将 它们 应 用 于 舞台 上 的 对 象 ， 只 需 选 择 对 象 并 单 击 【 动 画 预 设 】 
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面板 中 的 【应 用 】 按 钮 即 可 。 
1. 预览 动画 预 设 

Flash 随 附 的 每 个 动画 预 设 都 可 以 在 【动画 预 设 】 面 板 中 查看 其 预览 。 这 样 ， 可 以 了 解 在 将 动画 应 用 
于 FLA 文件 中 的 对 象 时 所 获得 的 结果 。 

执行 【窗口 】| 【动画 预 设 】 命 令 ， 打开 【动画 预 设 】 面 板 。 然 后 ， 从 该 面板 的 列表 中 选择 一 个 动画 
预 设 . 即 可 在 面板 项 部 的 【预览 】 窗 格 中 播放 。 
2. 应 用 动画 预 设 

在 舞 合 上 选择 可 补 间 的 对 象 (元 件 实例 或 文本 字段 }) 后 ， 可 单 击 【动画 预 设 〗】 面 板 中 的 【应 用 】 按 
钮 来 应 用 预 设 。 每 个 对 象 只 能 应 用 一 个 预 设 ， 如 果 将 第 二 个 预 设 应 用 于 相同 的 对 象 ， 则 第 二 个 预 设 将 蔡 
换 第 一 个 预 设 。 

在 舞台 上 选择 一 个 可 补 间 的 对 象 。 如 果 将 动画 预 设 应 用 于 无 法 补 间 的 对 象 ， 则 会 显示 一 个 对 话 框 . 
允许 将 该 对 象 转换 为 元 件 。 在 【动画 预 设 】 面 板 中 选择 一 个 预 设 . 然后 单 击 面板 中 的 【应 用 】 按 钮 . 或 
者 在 面板 菜单 中 执行 【在 当前 位 置 应 用 】 命 令 ， 即 可 将 该 动画 预 设 应 用 到 舞台 中 的 元 件 实例 。 
3. 将 补 间 另存 为 自 定义 动画 预 设 

如 果 创 建 自己 的 补 间 ， 或 对 在 【动画 预 设 】 面 板 中 应 用 的 补 间 进 行 更 改 ， 可 将 它 另存 为 新 的 动画 预 
设 。 新 预 设 将 显示 在 【动画 预 设 】 面 板 中 的 【 自 定义 预 设 】 文 件 夹 中 。 如 果 想 要 将 自 定义 补 间 另 存 为 预 
设 ， 首先 选择 时 间 轴 中 的 补 间 范 围 、 舞 台中 应 用 了 自 定义 补 间 的 对 象 或 舞台 上 的 运动 路 径 。 单 击 【 动 画 
预 设 】 面 板 中 的 【将 选区 另存 为 预 设 】 按 钮 . 或 者 右 击 补 间 范 围 ， 在 弹出 的 菜单 中 执行 【另存 为 动画 预 
设 】 命 令 ， 可 将 当前 动画 另存 为 新 的 动画 预 设 。 
4. 导入 动画 预 设 

Flash 的 动画 预 设 都 是 以 XML 文件 的 形式 存储 在 本 地 计算 机 中 的 。 导 入 外 部 的 XML 补 间 文 件 ， 可 
以 将 其 添加 到 【动画 预 设 】 面 板 中 。 单 击 【动画 预 设 】 面 板 右上 角 的 选项 按钮 ,在 弹出 的 菜单 中 执行 【 导 
入 】 命 令 . 打开 【打开 】 对 话 框 。 然 后 通过 该 对 话 框 选择 要 导入 的 XML 文件 。 导 入 完成 后 ， 将 会 在 【 动 
画 预 设 】 面 板 中 的 【 自 定义 预 设 】 文 件 夹 中 显示 刚才 导入 的 自 定义 动画 预 设 。 


24.1 


Flash 允许 通过 在 舞台 的 3D 空间 中 移动 和 旋转 影片 剪辑 来 创建 3D 效果 。Flash 通过 在 每 个 影片 剪辑 
实例 的 属性 中 包括 Z 轴 来 表示 3D 空间 。 通 过 沿 着 Z 轴 移 动 和 旋转 影片 剪辑 实例 , 可 以 向 影片 剪辑 实例 中 
添加 3D 透视 效果 。 


24.7.1 平移 3D 图 形 


使 用 【3D 平移 工具 】 可 以 在 3D 空间 中 移动 影片 剪辑 实例 的 位 置 ， 这样 使 影片 剪辑 实例 看 起 来 离 观 
察 者 更 近 或 更 远 。 单 击 【工具 】 面 板 中 的 【3D 平移 工具 】 按 钮 .然后 选择 舞台 中 的 影片 剪辑 实例 。 此 时 
该 影片 剪辑 的 了 了 和 了 Z 三 个 轴 将 显示 在 实例 的 正中 间 。 其 中 . 于 轴 为 红色 、 了 轴 为 绿色 .而 Z 轴 为 一 个 

























































































【3D 平移 工具 】 的 默认 模式 是 全 局 。 在 全 局 3D 空间 中 移动 对 象 与 相对 舞台 移动 对 象 等 效 :在 局 部 
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3D 空间 中 移动 对 象 与 相对 父 影片 剪辑 (如 果 有 ) 移动 对 象 等 效 。 如 果 要 切换 【3D 平移 工具 】 的 全 局 模 
式 和 局 部 模式 ， 可 以 在 选择 【3D 平移 工具 】 的 同时 单 击 【工具 】 面 板 【 选 项 】 部 分 中 的 【全 局 】 切 换 
按钮 。 

如 果 要 通过 【3D 平移 工具 】 进 行 拖 动 来 移动 影片 剪辑 实例 ， 首 先 将 指针 移动 到 该 实例 的 工 了 或 Z 
轴 控 件 上 ， 此 时 在 指针 的 尾 处 将 会 显示 该 坐标 轴 的 名 称 。 开 和 了 轴 控 件 是 每 个 轴 上 的 箭头 。 使 用 鼠标 按 
控件 箭头 的 方向 拖 动 其 中 一 个 控件 . 即 可 沿 所 选 轴 (水 平 或 垂直 方向 ) 移动 影片 剪辑 实例 。Z 轴 控 件 是 影 
片 剪 辑 中 间 的 黑 点 . 上 下 拖 动 该 黑 点 即 可 在 Z 轴 上 移动 对 象 .此 时 将 会 放大 或 缩小 所 选 的 影片 剪辑 实例 . 
以 产生 离 观察 者 更 近 或 更 远 的 效果 。 

除 此 之 外 .在 【属性 】 面 板 的 【3D 定位 和 视图 】 选 项 中 输入 开 了 或 2 的 值 . 也 可 以 改变 影片 剪辑 
实例 在 3D 空间 中 的 位 置 。 在 3D 空间 中 ,如 果 想 要 移动 多 个 影片 剪辑 实例 ， 可 以 使 用 【3D 平移 工具 】 
移动 其 中 一 个 实例 ， 此 时 其 他 的 实例 也 将 以 相同 的 方式 移动 。 

(1) 如 果 要 在 全 局 3D 空间 中 以 相同 方式 移动 组 中 的 每 个 实例 ,首先 将 【3D 平移 工具 】 设 置 为 【全 
局 】 模 式 ， 然 后 用 轴 控 件 拖 动 其 中 一 个 实例 。 按 住 Shift 键 并 双击 其 中 一 个 选中 实例 可 将 轴 控 件 移动 到 该 
实例 。 

(2) 如 果 要 在 局 部 3D 空间 中 以 相同 方式 移动 组 中 的 每 个 实例 ,首先 将 【3D 平移 工具 】 设 置 为 【局 
部 】 模 式 ， 然 后 用 轴 控 件 拖 动 其 中 一 个 实例 。 按 住 Shift 键 并 双击 其 中 一 个 选中 实例 可 将 轴 控 件 移动 到 该 
实例 。 

通过 双击 Z 轴 控 件 , 也 可 以 将 轴 控 件 移动 到 多 个 所 选 影 片 剪辑 实例 的 中 心 。 按 住 Shift 键 并 双击 其 中 
一 个 实例 ， 可 将 轴 控 件 还 原 到 该 实例 。 


24.7.2 旋转 3D 图 形 


使 用 【3D 旋转 工具 】 可 以 在 3D 空间 中 旋转 影片 剪辑 实例 ， 这 样 通过 改变 实例 的 形状 ,使 之 看 起 来 
与 观察 者 之 间 形 成 某 一 个 角度 。 

单 击 【工具 】 面 板 中 的 【3D 旋转 工具 】 按 钮 ， 然 后 选择 舞台 中 的 影片 剪辑 实例 。 此 时 ，3D 旋转 控 
件 出 现在 该 实例 之 上 。 其 中 . 革 轴 为 红色 、 了 轴 为 绿色 、Z 轴 为 蓝 色 ,使 用 橙色 的 自由 旋转 控件 可 同时 绕 
工 和 了 了 轴 旋 转 。 

【3D 旋转 工具 】 的 默认 模式 为 全 局 。 在 全 局 3D 空间 中 旋转 对 象 与 相对 舞台 移动 实例 等 效 ， 在 局 部 
3D 空间 中 旋转 实例 与 相对 父 影片 剪辑 (如 果 有 ) 移动 实例 等 效 。 如 果 要 切换 【3D 旋转 工具 】 的 全 局 模 
式 和 局 部 模式 ， 可 以 在 选择 【3D 旋转 工具 】 的 同时 单 击 【工具 】 面 板 【 选 项 】 部 分 中 的 【全 局 】 切 换 
按钮 。 

如 果 要 通过 【3D 旋转 工具 】 进 行 拖 动 来 放置 影片 剪辑 实例 ,首先 将 指针 移动 到 该 实例 的 了 了、 Z 轴 
或 自由 旋转 控件 上 ， 此 时 在 指针 的 尾 处 将 会 显示 该 坐标 轴 的 名 称 。 拖 动 一 个 轴 控 件 可 以 使 所 选 的 影片 剪 
辑 实例 绕 该 轴 旋转 ， 例 如 左右 拖 动 工 轴 控 件 可 以 绕 工 轴 旋 转 : 上 下 拖 动 了 轴 控件 可 以 绕 了 轴 旋转 ， 拖 动 
Z 轴 控 件 可 以 使 影片 剪辑 实例 绕 Z 轴 旋转 进行 圆周 运动 :而 拖 动 自由 旋转 控件 (外侧 榜 色 圈 ) ， 可 以 使 影 
片 剪 辑 实例 同时 绕 工 和 了 轴 旋 转 。 

在 舞台 上 选择 一 个 影片 剪辑 , 3D 旋转 控件 将 显示 为 到 加 在 所 选 实例 上 。 如 果 这 些 控件 出 现在 其 他 位 
置 ， 可 以 双击 该 控件 的 中 心 点 以 将 其 移动 到 选 定 实例 的 正中 心 。 如 果 想 要 相对 于 影片 剪辑 实例 重新 定位 
旋转 控件 的 中 心 点 ， 可 以 单 击 并 拖 动 中 心 点 至 任意 位 置 。 这 样 .再 拖 动 站 了 、Z 轴 或 自由 拖 动 控 件 时 . 
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将 使 实例 绕 新 的 中 心 点 旋转 。 例 如 将 旋转 控件 的 中 心 点 拖 动 至 影片 剪辑 实例 的 左下 角 . 然后 逆 时 针 拖 动 Z 
轴 控 件 ， 即 可 以 新 的 中 心 点 旋转 。 

执行 【窗口 】| 【变形 】 命 令 ,打开 【变形 】 面 板 。 然 后 ,选择 舞台 上 的 一 个 影片 剪辑 实例 ， 在 【 交 
形 】 面 板 【3D 旋转 】 选 项 中 输入 并 了 和 Z 轴 的 角度 .也 可 以 旋转 所 选 的 实例 。 在 舞台 中 选择 多 个 影片 
剪辑 实例 ，3D 旋转 控件 将 显示 为 到 加 在 最 近 所 选 的 实例 上 。 然 后 使 用 【3D 旋转 工具 】 旋 转 其 中 任意 一 
个 实例 ， 其 他 的 实例 也 将 以 相同 的 方式 旋转 。 选 择 舞 台 上 的 所 有 影片 剪辑 实例 .通过 双击 Z 轴 控 件 . 可 
以 让 中 心 点 移动 到 影片 剪辑 组 的 中 心 。 按 住 Shift 键 并 双击 其 中 一 个 实例 .可 将 轴 控 件 还 原 到 该 实例 。 

所 选 实例 的 旋转 控件 中 心 点 的 位 置 在 【变形 】 面 板 中 显示 为 【3D 中 心 点 】]， 可 以 在 【变形 】 面 板 中 
修改 中 心 点 的 位 置 。 例 如 ， 设 置 影片 剪辑 组 旋转 控件 的 中 心 点 他 为 300、 了 为 150、Z 为 50。 


24.7.3 ”调整 透视 角度 


FLA 文件 的 透视 角度 属性 控制 3D 影片 剪辑 视图 在 舞台 上 的 外 观 视 角 。 增 大 或 减 小 透视 角度 将 影响 
3D 影片 剪辑 的 外 观 尺 寸 及 其 相对 于 舞台 边缘 的 位 置 . 增 大 透视 角度 可 使 影片 剪辑 对 象 看 起 来 更 接近 观察 
者 ， 减 小 透视 角度 属性 可 使 对 象 看 起 来 更 远 。 此 效果 与 通过 镜头 更 改 视角 的 照相 机 镜头 缩放 类 似 。 

透视 角度 属性 会 影响 应 用 了 3D 平移 或 旋转 的 所 有 影片 剪辑 ， 默认 透视 角度 为 55” 视 角 ， 值 的 范围 
为 1 ”一 180”。 如 果 要 在 【属性 】 面 板 中 查看 或 设置 透视 角度 ， 必 须 在 舞台 上 选择 一 个 3D 影片 剪辑 。 
此 时 ， 对 透视 角度 所 做 的 更 改 将 在 舞台 上 立即 可 见 。 例 如 ， 在 【属性 】 面 板 的 【透视 角度 】〗 选 项 输入 透 
视角 度 为 115”， 或 拖 动 热 文本 以 更 改 透视 角度 为 115”。 


24.7.4 调整 消失 点 


FLA 文件 的 消失 点 属性 控制 舞台 上 影片 剪辑 对 象 的 Z 轴 方向 。FLA 文件 中 所 有 影片 剪辑 的 Z 轴 都 朝 
着 消失 点 后 退 。 

通过 重新 定位 消失 点 ， 可 以 更 改 沿 Z 轴 平 移 对 象 时 对 象 的 移动 方向 。 通 过 调整 消失 点 的 位 置 ， 可 以 
精确 控制 舞台 上 3D 对 象 的 外 观 和 动画 。 

例如 ， 将 消失 点 定位 在 舞台 的 左上 角 (0,0)， 则 增 大 影片 剪辑 的 Z 属性 值 可 使 影片 剪辑 远离 观察 者 并 
向 着 舞台 的 左上 角 移动 。 因 为 消失 点 影响 所 有 影片 剪辑 ， 所 以 更 改 消失 点 也 会 更 改 应 用 了 Z 轴 平 移 的 所 
有 影片 剪辑 的 位 置 。 

消失 点 是 一 个 文档 属性 ， 它 会 影响 应 用 了 Z 轴 平 移 或 旋转 的 所 有 影片 剪辑 ,不 会 影响 其 他 影片 剪辑 。 
消失 点 的 默认 位 置 是 舞台 中 心 。 如 果 要 在 【属性 】 面 板 中 查看 或 设置 消失 点 ,必须 在 舞台 上 选择 一 个 影 
片 剪辑 实例 。 
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骨骼 动画 技术 是 一 种 依靠 运动 学 原理 建立 的 、 应 用 于 计算 机 动画 的 新 兴 技 术 。 开 发 这 种 技术 的 目的 
是 模拟 各 种 动物 和 机 械 的 复杂 运动 .使 动画 中 的 角色 动作 更 加 逼真 、 符 合 真实 的 形象 。 用 户 通过 学 习 可 
以 更 好 地 制作 出 Flash 动画 。 
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24.8.1 骨骼 和 运动 学 


在 介绍 骨骼 动画 之 前 ， 首 先 要 了 解 正 向 运动 学 和 反 向 运动 学 。 
1. 正 向 运动 学 
正 向 运动 学 (Forward Kinematics，FK) 是 子 物体 跟随 父 物体 的 运动 规律 。 以 简单 的 大 力 水 手 为 例 . 
在 这 个 人 物 中， 躯干 为 祖父 物体 ， 后 臂 为 父 物体 ， 前 臂 为 子 物 体 。 在 正 向 运动 时 ， 父 物体 的 运动 会 影响 
到 子 物体 ， 使 子 物体 保持 与 父 物体 一 致 。 同 时 ， 在 正 向 运动 中 ， 子 物体 的 运动 则 不 会 影响 到 父 物体 ， 无 
论 子 物体 如 何 移动 ， 父 物体 都 保持 不 变 。 
2. 反 向 运动 学 

反 向 运动 学 (Inverse Kinematics, IK) 是 另 一 种 运动 学 理论 ， 其 与 正 向 运动 学 有 一 定 的 区 别 。 在 反 向 
运动 学 中 ， 需 要 在 已 经 设置 的 子 物 体 和 父 物体 上 添加 一 种 算法 ， 从 而 使 父 物体 能 够 随 着 子 物体 的 变换 而 
进行 相反 方向 的 变换 。 

在 基于 父 物体 的 运动 中 ， 正 向 运动 和 反 向 运动 是 完全 相同 的 。 然 而 ， 在 基于 子 物体 的 运动 中 ， 正 向 
运动 与 反 向 运动 则 完全 相反 。 仍 然 依据 之 前 制作 的 大 力 水 手 实例 .在 上 面 的 动画 中 .由 于 使 用 了 一 种 特 
殊 的 连接 工具 (下 骨骼 ) 因此， 当 子 物体 进行 旋转 运动 时 ， 父 物体 也 会 进行 相应 的 移动 。 反 向 运动 学 可 
以 模拟 各 种 动物 的 肢体 运动 ， 以 及 一 些 简单 机 械 (例如 杠杆 ) 等 的 机 械 禹 运动 。 

3. 骨骼 动画 

在 各 种 支持 反 向 运动 学 动画 的 设计 软件 中 ， 大 多 是 通过 一 种 连接 各 种 物体 的 辅助 工具 来 实现 反 向 运 
动 . 这 种 工具 就 是 下 骨骼 ， 也 称 反 向 运动 骨骼 。 使 用 下 骨骼 制作 的 反 向 运动 学 动画 又 被 称 作 骨 骼 动画。 

骨骼 动画 是 典型 的 相对 运动 到 绝对 运动 的 计算 。 在 骨骼 动画 中 提供 了 一 种 算法 .根据 子 物体 的 运动 
模式 ， 计 算 父 物体 的 运动 变化 。 然 后 ， 根 据 骨骼 运动 算法 ， 将 子 物体 与 父 物体 通过 骨骼 进行 连接 ， 使 父 
物体 根据 子 物 体 的 运动 而 发 生 改 变 。 因 此 ， 加 入 骨骼 制作 的 动画 属于 反 向 运动 学 。 


24.8.2 添加 IK 骨骼 


在 早期 的 Flash 版 本 中 并 不 支持 骨骼 功能 . 因此 , 大 多 数 反 向 运动 必须 依靠 用 户 手工 进行 设置 或 依靠 
第 三 方 插件 (例如 著名 的 MOHO 插件 等 ) 来 完成 。 在 Flash 中 ,提供 了 全 新 的 骨髓 用户， 帮助 用 户 制作 
各 种 复杂 的 动作 动画 ， 节 省 了 用 户 大 量 的 手工 调节 工作 时 间 。 

首先 ,在 Flash 影片 中 绘制 需要 制作 反 向 动画 的 各 种 对 象 ， 并 分 别 将 其 转换 为 影片 剪辑 元 件 。 例 如 ， 
绘制 一 个 插画 风格 的 女 白领 ， 分别 将 其 手 、 前 臂 和 后 臂 作为 子 对 象 、 父 对 象 和 祖父 对 象 。 然 后 ,选择 作 
为 祖父 对 象 的 后 臂 . 在 【工具 】 面 板 中 选择 【骨骼 工具 】， 在 身体 和 前 臂 处 添加 骨骼 。 用 同样 的 方式 选中 
前 臂 ， 继 续 为 角色 添加 手 部 子 对 象 的 骨骼 ， 完 成 祖父 对 象 、 父 对 象 到 子 对 象 之 间 的 骨骼 连接 。 用 同样 的 
方式 为 另 一 只 手臂 和 手 添加 骨骼 ， 即 可 完成 角色 双手 部 分 的 骨骼 制作 。 


24.8.3 选择 与 设置 骨骼 速度 


在 Flash 中 ， 不 仅 允许 用 户 为 Flash 元 件 添加 骨骼 ， 还 提供 了 便捷 的 骨 网 选 定 工具 ， 帮 助 用户 方 便 地 
选择 已 添加 的 骨骼 。 

除 此 之 外 ，Flash 还 提供 了 下 骨骼 速度 的 设置 项 目 ， 帮 助 用户 建 立 更 加 完善 的 骨骼 运动 系统 。 
1. 快速 选择 骨骼 

Flash 提供 了 便捷 的 骨骼 选 定 工具 ， 多 许 用 户 选择 同 级 别 以 及 不 同 级 别 的 各 种 骨骼 组 件 ， 帮 助 用 户 设 
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置 骨 骼 组 件 的 属性 。 在 Flash 影片 中 . 使 用 鼠标 单 击 任意 一 组 骨骼 . 然后 即 可 在 【属性 】 面 板 中 通过 骨骼 
级 别 按钮 切换 选择 其 他 骨骼 。 
2. 设置 骨骼 运动 速度 

在 默认 情况 下 ,连接 在 一 起 的 代 骨骼 ,其 子 级 和 父 级 的 相对 运动 速度 是 相同 的 。 也 就 是 说 , 子 级 对 
象 旋转 多 少 角度 ， 父 级 对 象 也 会 进行 相同 的 角度 同步 旋转 。 

然而 在 自然 界 中 .各 种 动物 进行 的 反 向 运动 往往 是 异步 的 。 例 如 ， 人 类 的 小 腿 以 膝 关 节 为 中 心 旋转 
时 ,大 腿 往往 只 旋转 很 小 的 角度 。 因 此 . 如果 用 户 需 要 逼真 地 模拟 动物 的 运动 ,还 需要 设置 区 骨骼 的 反 
向 运动 速度 。 在 Flash 影片 中 , 选择 父 级 下 骨骼 . 在 【属性 】 面 板 中 即 可 设置 【速度 】 为 “10%”。 同 理 . 
用 户 也 可 以 设置 子 级 代 骨骼 的 相对 运动 速度 .使 子 级 代 骨骼 与 父 级 代 骨骼 之 间 的 异步 运动 差 更 大 。 


24.8.4 联系 方式 与 约束 


在 之 前 的 小 节 中 ,已 介绍 了 添加 下 骨骼 和 设置 区 骨骼 的 速度 等 属性 。Flash 的 代 骨骼 功能 十 分 强 
大 ,除了 人 允许 设置 速度 外 ,还 允许 用 户 启用 多 种 联接 方式 以 及 约束 骨骼 运动 的 幅度 等 。 在 Flash 中 绘制 角 
色 ， 并 将 角色 的 躯干 、 大 腿 、 小 腿 和 双 脚 分 别 转换 为 元 件 ， 然 后 即 可 为 角色 添加 骨骼 ， 以 设置 联接 方式 
与 约束 。 
1. 启用 /禁用 联接 方式 

Flash 的 琅 骨骼 主要 有 三 种 联接 方式 ， 即 旋转 、 水 平平 移 和 垂直 平移 等 。 在 默认 的 情况 下 ， 新 建 的 
下 骨骼 往往 只 开启 了 旋转 的 联接 方式 ， 只 能 根据 骨骼 的 节点 进行 旋转 。 如 果 需 要 开启 水 平平 移 或 垂直 平 
移 ， 以 及 关闭 默认 的 旋转 联接 ， 则 可 通过 【属性 】 面 板 中 的 相应 选项 卡 进行 设置 。 

例如 ,要 关闭 旋转 联接 , 为 角色 开启 水 平平 移 联接 , 则 可 以 先 选择 角色 的 下 骨骼 . 然后 , 在 【属性 】 
面板 中 的 【联接 : 旋转 】 选 项 卡 中 单 击 【启用 】 复 选 框 ， 将 对 号 消除 。 

然后 ,再 在 【属性 】 面 板 中 的 【联接 : X 平移 】 选 项 卡 中 单 击 【启用 】 复 选 框 保持 选中 ， 最 后 
即 可 操作 角色 的 这 一 骨骼 ， 进 行 水 平平 移 运动 。 用 同样 的 方式 ， 也 可 选择 Y 平移 的 启用 ， 为 骨骼 添加 垂 
直 平 移 的 联接 。 
2. 约束 骨骼 

在 默认 情况 下 , 已 联接 的 骨骼 是 可 以 以 任意 的 幅度 进行 运动 的 。 例如 , 旋转 的 联接 方式 可 以 360” 旋 
转 ， 而 水 平平 移 和 垂直 平移 可 以 平移 到 舞台 的 任意 位 置 。Flash 在 【属性 】 面 板 中 提供 了 设置 的 选项 ,人 允 
许 用 户 约束 骨骼 平移 的 幅度 ， 以 限制 骨骼 的 运动 。 

例如 , 约束 旋转 的 骨骼 可 以 在 Flash 文档 中 选择 已 添加 的 旋转 联接 方式 的 骨骼 . 然后, 即 可 在 【 属 
性 】 面 板 中 打开 【联接 : 旋转 】 选 项 卡 ， 选 中 【约束 】 复 选 框 ， 在 右 侧 的 输入 文本 框 中 设置 骨骼 旋转 的 
最 小 角度 和 最 大 角度 。 在 为 骨骼 设置 约束 后 ， 骨骼 之 间 的 联接 节点 就 会 由 圆 形 变 为 约束 的 角度 ， 两 个 骨 
骼 直角 的 夹 角 将 无 法 超过 该 角度 。 


24.8.5 ”IK 形状 与 绑 定 


下 骨骼 不 仅 可 应 用 于 影片 剪辑 元 件 ， 也 可 应 用 于 各 种 Flash 绘制 形状 中 。 在 为 形状 添加 下 骨骼 后 . 
Flash 将 自动 把 普通 的 绘制 形状 转换 为 代 形状 。 通 过 为 矢量 图 形 添加 焉 骨骼 ,可 以 方便 地 对 各 种 绘制 形 
状 进行 变形 操作 。 

1. 制作 IK 形状 
到 形状 是 由 矢量 图 形 和 下 骨骼 组 成 的 。 以 一 个 蝴蝶 起 膀 为 例 ， 先 绘制 蝴蝶 的 两 只 翅膀 矢量 图 形 . 
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然后 选中 一 只 蝴蝶 翅膀 ， 即 可 使 用 【骨骼 工具 】 为 这 只 蝴蝶 起 膀 添 加 下 骨骼 ， 将 其 转换 为 区 形状 。 用 
同样 的 方式 ， 为 蝴蝶 的 另 一 只 起 膀 添 加 骨骼 ,然后 ， 即 可 使 用 鼠标 拖 奥 骨骼 ,控制 蝴 蝶 的 翅膀 变形 。 
2. 绑 定形 状 

Flash 允许 用 户 将 矢量 形状 的 部 分 局 部 端点 与 区 骨骼 绑 定 . 以 防止 区 骨骼 在 为 矢量 图 形变 形 时 , 影 
响 这 部 分 的 形状 。 在 Flash 文档 中 ,选中 开 形状 ， 然 后 即 可 在 【工具 】 面 板 中 选择 【 绑 定 工具 】， 再 次 单 
击 东 形状 . 显示 开 形状 中 的 端点 。 
使 用 鼠标 按 住 开 形状 中 的 端点 ， 然 后 ， 即 可 从 端点 向 骨骼 的 节点 方向 拖 投 ,将 端点 与 节点 绑 定 。 选 
中 骨骼 ， 然后 即 可 查看 当前 已 与 该 节 骨 骼 绑 定 的 各 种 端点 。 

在 将 端点 与 骨骼 绑 定 后 ， 拖 卸 骨 做 时 ,该 端点 附近 的 图 形 填充 和 笔触 将 保持 与 骨骼 的 相对 距离 不 变 。 


24.8.6 ”IK 骨骼 动画 


下 骨骼 是 制作 各 种 复杂 形变 动画 的 有 效 工 具 。 使 用 下 骨骼 . 可 以 控制 Flash 影片 剪辑 元 件 、 正 图 形 
等 各 种 对 象 的 动作 ， 免 去 用 户 绘 制 逐 帧 动画 的 麻烦 。 下 骨骼 动画 就 是 使 用 【骨骼 工具 】 将 各 种 影片 剪辑 
元 件 联接 在 一 起 ， 然 后 控制 影片 剪辑 元 件 的 旋转 和 位 移 ， 形 成 的 动画 。 制 作 区 骨骼 动画 ， 既 可 以 使 用 普 
通 的 补 间 动 画 ， 也 可 以 使 用 传统 补 间 动 画 等 同时， 也 可 为 区 骨骼 动画 应 用 引导 层 和 遮 罩 
例如 ,制作 一 个 饮酒 的 女性 ， 首先， 在 Flash 文档 中 绘制 桌 椅 、 女 性 的 身体 、 后 臂 、 前 辟 、 手 和 酒杯 
等 图 形 ， 然 后 ， 即 可 将 这 些 图 形 转换 为 元 件 。 选 择 【 骨 骼 工具 】， 自 女性 的 身体 开始 ,制作 下 骨骼 ,将 
女性 身体 、 后 禹 、 前 辟 、 手 和 酒杯 用 骨 能 连接 起 来 。 

为 每 一 节 藉 骨骼 设置 约束 的 角度 ， 以 防止 骨骼 的 旋转 过 于 灵活 。 在 【时 间 轴 】 面板 中 选中 名 为 “ 骨 
架 1 ”的 骨骼 图 层 中 的 第 50 帧 ， 右 击 执行 【插入 帧 】 命 令 ， 插 入 骨骼 动作 的 普通 帧 。 再 次 选中 第 50 
帧 ， 右 击 ， 执行 【插入 姿势 】 命 令 ， 插 入 一 个 骨骼 动作 的 关键 帧 。 在 第 50 帧 中 调节 各 骨骼 的 位 置 ， 将 酒 
杯 对 准 女 性 的 口 部 ， 即 可 完成 饮酒 的 动画 。 
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本 章 概要 性 地 介绍 Flash 动画 在 网 站 建设 中 的 应 用 .主要 内 容 有 餐饮 网 站 、 帧 、 元 件 、 滤 镜 、 补 间 、 
特效 、3D、 骨 骼 ， 为 本 书后 续 的 学 习 打下 坚实 的 基础 。 主 要 讲述 如 何在 网 站 建设 中 应 用 Flash 动画 ， 制 
作 吸 引 人 的 网 站 的 一 些 方法 和 相关 技术 ， 接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进行 实践 。 


24.9.1 制作 餐饮 类 网 站 开头 动画 


当 打开 Flash 网 站 时 , 通常 都 会 先 播放 一 个 炫丽 的 开头 动画 , 这样 不 但 吸引 了 访问 者 的 注意 力 , 而 且 
可 以 展示 网 站 的 布局 结构 。 对 于 Flash 网 站 来 说 , 开头 动画 是 非常 有 必要 的 。 本 例 就 制作 一 个 曲 奇 饼 干 网 
站 的 开头 动画 ， 主 要 练习 导入 外 部 素材 、 新 建 图 层 、 创 建 传统 引导 图 层 、 创 建 补 间 动 画 、 创 建 传统 补 间 
动画 和 创建 引导 动画 。 
STEP|01 新 建文 档 ， 在 【文档 设置 】 对 话 框 中 设置 舞台 的 尺寸 为 766 像素 x 600 像素 。 然 后 ,执行 【 文 
件 】|【 导 入】|【 导 入 到 有 舞台】 命令 .将 素材 图 像 “bgjpg” 导 入 到 和 舞台 .并 在 第 85 帧 处 插入 普通 帧 。 
STEP|02 执行 【插入 】|【 新 建 元 件 】 命 令 ， 新 建 名 称 为 “主题 背景 ”的 影片 剪辑 。 然 后 ， 选择 【和 拢 形 
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网 页 设计 与 网 站 建设 自学 经 典 : 


网 页 设计 与 网 站 建设 自学 经 典 





工具 】〗， 启 用 【工具 】 中 的 【绘制 对 象 】 选 项 . 在 舞台 中 绘制 一 个 420 像素 x 520 像素 的 白色 (在 FFFFF) 
矩形。 

STEP|03 使 用 相同 的 方法 . 在 白色 珑 形 的 上 面 绘制 一 个 380 像素 x 500 像素 的 淡 黄色 (十 5F5F0) 矩形 。 
然后 选择 这 两 个 矩形 . 打开 【对 齐 】 面 板 ， 单 击 【水 平 对 齐 】 和 【垂直 对 齐 】 按 钮 。 

STEP|04 返回 场景 。 新 建 “ 主 题 背 景 ”图 层 . 将 “主题 背景 ”影片 剪辑 拖 入 到 和 舞 合 。 然 后 选择 该 影片 前 
辑 ， 在 【变形 】 面 板 中 设置 其 缩放 宽度 和 缩放 高 度 均 为 “1296 。 

STEP|05 右 击 “主题 背景 ” 图 层 . 在 弹出 的 菜单 中 执行 【添加 传统 运动 引导 层 】 命令. 创建 运动 引导 层 ， 
使 用 【铅笔 工具 】 在 舞台 中 绘制 运动 路 径 。 然 后 ,将 “主题 背景 ”影片 剪辑 拖 动 到 路 径 的 起 始 端点 。 
STEP|06 选择 “主题 背景 ”图 层 . 在 第 30 帧 处 插入 关键 帧 ， 将 “主题 背景 ”影片 剪辑 拖 动 到 路 径 的 结 
束 端点 ,在 【变形 】 面 板 中 设置 其 缩放 宽度 和 缩放 高 度 均 为 “1009% 。 然 后 右 击 这 两 个 关键 帧 之 间 的 任 
意 一 帧 ， 在 弹出 的 菜单 中 执行 【创建 传统 补 间 动 画 】 命 令 . 创建 传统 补 间 动 画 。 

STEP|07 在 第 10 帧 处 插入 关键 帧 ， 在 【变形 】 面 板 中 设置 影片 剪辑 的 缩放 宽度 为 “409%“、 缩 放 高 度 为 
“7% 。 然 后 在 第 15 帧 处 插入 关键 帧 ， 设 置 其 缩放 宽度 为 “14.5% 、 缩 放 高 度 为 “8% 。 

STEP|08 在 第 20 帧 处 插入 关键 帧 ， 在 【变形 】 面 板 中 设置 影片 剪辑 的 缩放 宽度 为 “45%“、 缩 放 高 度 为 
“8.5% 。 然 后 在 第 25 帧 处 插入 关键 帧 ， 设 置 其 缩放 宽度 为 “28% 、 缩 放 高 度 为 “20% 。 

STEPI09 新 建 LOGO 图 层 ， 在 第 30 帧 处 插入 关键 帧 ， 将 素材 图 像 “LOGO.png” 导 入 到 舞台 。 然 后 ， 
右 击 该 关键 帧 ， 在 弹出 的 菜单 中 执行 【创建 补 问 动画】 命令， 创建 补 间 动 画 。 

STEP|10 选择 第 45 帧 ， 将 LOGO 影片 剪辑 拖 动 到 舞台 的 右 下 角 。 然 后 选择 该 图 层 ， 并 移动 至 “主题 
背景 ”图 层 的 下 面 。 

STEPITI 新 建 “ 版 尾 信 息 ” 图 层 . 在 第 30 帧 处 插入 关键 帧 ,使 用 【文本 工具 】 在 舞台 的 左下 方 输入 版 尾 
信息 。 然 后 创建 补 间 动 画 ， 选 择 第 45 帧 ， 将 文字 向 上 移动 。 


24.9.2 制作 餐饮 类 网 站 导航 和 首页 


对 于 网 站 来 说 ,导航 条 发 挥 着 极其 重要 的 作用 ， 它 为 网 站 访问 者 提供 了 从 一 个 页 面 跳 转 到 另 一 个 页 
面 的 途径 ,使 访问 者 可 以 方便 、 快 速 地 访问 到 所 需 的 内 容 。 本 例 将 为 网 站 制作 一 个 Flash 导航 ,主要 练习 
输入 文字 、 设 置 文字 属性 、 创 建 补 间 动 画 、 使 用 任意 
变形 工具 、 转 换 为 影片 剪辑 、 设 置 Alpha 透明 度 ， 如 
图 24-1 所 示 。 

STEP|01 新 建 “ 联 系 方式 ”影片 剪辑 , 使 用 【文本 工 
具 】 在 舞台 中 输入 文字 “联系 方式 ， 在 属性 检查 器 中 
设置 其 系列 、 大 小 和 颜色 。 然 后 创建 补 间 动 画 ， 在 第 
10 帧 处 插入 关键 帧 。 

STEP|02 选择 第 4 帧 ， 将 文字 向 右 移动 。 选 择 第 7 
帧 , 再 将 文字 向 左 移动 。 新 建 图 层 ,在 第 10 帧 处 插入 
关键 帧 ， 在 【动作 】 面 板 中 输入 停止 播放 动画 命令 
stopO: 。 

STEPI03 新 建 “ 联 系 方式 按钮 ”按钮 元 件 . 使 用 【 文 图 24-1 制作 餐饮 类 网 站 导航 和 首页 

本 工具 】 在 舞台 中 输入 文字 “联系 方式 .并 在 属性 检查 器 中 设置 相同 的 样式 。 然 后 ， 在 【指针 经 过 】 状 
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态 帧 处 插入 空白 关键 帧 ,将 “联系 方式 ”影片 剪辑 拖 入 到 舞台 中 .并 移动 到 相同 的 位 置 。 
STEP|04 复制 【 弹 起 】 状 态 帧 ， 在 【 按 下 】 状 态 帧 处 粘贴 关键 帧 。 然 后 ， 在 【点 击 】 状 态 帧 处 插入 空白 
关键 帧 ,使 用 【 算 形 工具 】 在 舞台 中 绘制 一 个 答 形 。 
STEP|05 使 用 相同 的 方法 . 制作 导航 条 中 的 其 他 按钮 元 件 . 包括 曲 奇 展示 、 曲 奇 文化 、 烘焙 日 记 和 首页 。 
STEP|06 返回 场景 . 新 建 “ 联 系 方式 ”图 层 . 在 第 45 帧 处 插入 关键 帧 ， 将 【联系 方式 】 按 钮 元 件 拖 入 
到 舞台 上 方 。 然 后 创建 补 间 动 画 ， 选 择 第 55 帧 .在 【变形 】 面 板 中 设置 旋转 为 “15”。 
STEP|07 新 建 “ 曲 奇 展示 ”图 层 . 在 第 50 帧 处 插入 关键 帧 ， 将 【 曲 奇 展示 】 按 钮 元 件 拖 入 到 舞台 上 方 。 
然后 创建 补 间 动 画 ， 选 择 第 60 帧 ， 在 【变形 】 面 板 中 设置 旋转 为 “一 12 。 
STEP|08 新 建 “ 曲 奇 文化 ”图 层 . 在 第 55 帧 处 插入 关键 帧 .将 【 曲 奇 文化 】 按 钮 元 件 拖 入 到 舞 全 上方。 
然后 创建 补 间 动 画 ， 选 择 第 65 帧 ,在 【变形 】 面 板 中 设置 旋转 为 “20” ， 如 图 24-1 所 示 。 
STEP|09 新 建 “ 烘 焙 日 记 ” 图 层 . 在 第 60 帧 处 插入 关键 帧 ,将 【烘焙 日 记 】 按 钮 元 件 拖 入 到 舞台 上 方 。 
然后 创建 补 间 动 画 ， 选 择 第 70 帧 ， 在 【变形 】 面 板 中 设置 【旋转 】 为 “-20 。 
STEP|10 新 建 “ 首 页 ”图 层 ， 在 第 65 帧 处 插入 关键 帧 ， 将 【首页 】 按 钮 元 件 拖 入 到 舞台 上 方 。 然 后 创 
建 补 间 动 画 ， 选 择 第 75 帧 ， 在 【变形 】 面 板 中 设置 旋转 为 “35 。 

开头 动画 结束 后 ， 将 默认 显示 网 站 的 首页 内 容 ， 这 也 是 展示 给 访问 者 的 第 一 个 页 面 。 为 了 配合 Flash 
网 站 的 整体 效果 ， 首 页 内 容 同样 是 以 动画 的 形式 显示 出 
来 的 ， 如 图 24-2 所 示 。 
STEP|01 新 建 “ 网 页 -首页 ”影片 剪辑 ， 使 用 【文本 工 
具 】 在 舞 合 的 上 面 输入 “欢迎 来 到 曲 奇 世界 ”等 文字 ， 
并 在 属性 检查 器 中 分 别 设置 文字 的 样式 。 然 后 选择 所 有 
文字 , 执行 【修改 】|【 转 换 为 元 件 】 命 令 , 将 其 转换 为 
图 形 元 件 ， 并 在 第 25 帧 处 插入 普通 帧 。 
STEP|02 右 击 任意 一 帧 ， 创 建 补 间 动 画 。 在 第 1 帧 处 
选择 图 形 元 件 ， 在 属性 检查 器 中 设置 其 Alpha 透明 度 为 
“0%”。 然 后 选择 第 5 帧 , 更 改 Alpha 透明 度 为 “100%”。 
STEP|03 新 建 图 层 . 在 第 10 帧 处 插入 关键 帧 . 在 舞台 
中 输入 文字 “ 曲 奇 个 人 秀 "， 并 设置 文字 样式 。 然 后 . 
将 所 有 外 部 素材 图 像 导 入 到 【 库 】 面 板 中 ,将 “首页 -picl.png” 素 材 图 像 拖 入 到 文字 的 下 面 。 
STEP|04 选择 文字 和 图 像 ， 将 其 转换 为 图 形 元 件 。 然 后 右 击 第 10 帧 ,创建 补 间 动画 ， 在 该 关键 帧 处 设 
置 其 Alpha 透明 度 为 “0%“ 。 选 择 第 20 帧 ， 更 改 Alpha 透明 度 为 “10096 。 
STEP|05 新 建 图 层 , 在 第 15 帧 处 插入 关键 帧 ,在 舞 合 中 输入 文字 “烘焙 小 技巧 ”， 并 设置 文字 样式 。 然 
后 ,在 其 下 面 拖 入 “首页 -pic2.png” 素 材 图 像 ， 及 输入 介绍 小 技巧 的 文字 内 容 。 
STEP|06 选择 文字 和 图 像 ， 将 其 转换 为 图 形 元 件 。 然 后 右 击 第 15 帧 ， 创 建 补 间 动画 ， 在 该 关键 帧 处 设 
置 其 Alpha 透明 度 为 “0%“。 选 择 第 25 帧 ， 更 改 Alpha 透明 度 为 “100%”。 
STEP|07 返回 场景 。 新建“ 首页 ”图 层 . 在 第 30 帧 处 插入 关键 帧 . 将 “网 页 -首页 ”影片 剪辑 拖 入 到 “ 主 
题 背景 ”的 上 面 。 然 后 ， 在 第 76 帧 处 插入 关键 帧 。 














图 24-2 首页 内 容 
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ASP 是 微软 公司 推出 的 一 个 Web 服务 器 端的 开发 环境 ， 利 用 它 可 以 产生 和 运行 形态 的 、 交 互 的 、 高 
效能 的 Web 服务 运用 程序 。Access 在 开发 一 些小 型 网 站 Web 应 用 程序 时 ， 用 来 存储 数据 。 

本 章 将 详细 介绍 网 站 建设 中 的 ASP+Access, 主要 内 容 有 购物 类 网 站 分 类 、 ASP 基础 、 流程 控制 语句 、 
ASP 内 置 对 象 和 综合 实战 。 通 过 本 章 的 学 习 我 们 可 以 知道 怎样 在 网 站 中 应 用 ASP+Access。 








: 第 25 章 ASP+Access 


购物 网 站 就 是 商家 提供 网 络 购物 的 站 点 . 消费 者 利用 Intemet 直接 购买 自己 需要 的 商品 或 者 享受 自己 
需要 的 服务 。 网 络 购物 是 交易 双方 从 洽谈 、 签 约 到 贷款 的 支付 、 交 货 通知 等 整个 交易 过 程 通过 Intemnet、 
Web 和 购物 界面 技术 化 模式 一 并 完成 的 一 种 新 型 购物 方式 。 本 节 主 要 讲述 两 个 方面 的 内 容 ， 分 别 是 按照 
商业 活动 主体 分 类 和 按照 商品 主体 分 类 。 用 户 通过 学 习 可 以 了 解 购物 类 网 站 有 哪 几 种 分 类 。 


25.1.1 按照 商业 活动 主体 分 类 


通过 Internet 的 购物 网 站 购买 自己 需要 的 商品 或 者 服务 . 交易 双方 可 以 是 商家 对 商家 、 商 家 对 消费 者 
或 消费 者 对 消费 者 。 
1. B2B 

B2B 是 英文 Business-to-Business 的 缩写 ， 即 商家 对 商家 ， 或 者 说 是 企业 间 的 电子 商务 ， 即 企业 与 企 
业 之 间 通 过 互联 网 进行 产品 、 服 务 及 信息 的 交换 。 代 表 网 站 阿里 巴巴 是 全 球 领 先 的 B2B 电子 商务 网 上 贸 
易 平台 。 
2. B2C 

B2C 是 英文 Business-to-Consumer 的 缩写 , 即 商家 对 消费 者 也 就 是 通常 说 的 商业 零售 ,直接 面向 消 
费 者 销售 产品 和 服务 。 最 具有 代表 性 的 B2C 网 站 有 国内 最 大 的 中 文 网 上 书店 当当 网 和 美国 的 亚马逊 网 上 
商店 。 
3. C2C 

C2C 是 英文 Consumer-to-Consumer 的 缩写 ， 即 消费 者 与 消费 者 之 间 的 电子 商务 。C2C 发 展 到 现在 已 
经 不 仅仅 是 消费 者 与 消费 者 之 间 的 商业 活动 .很 多 商家 也 以 个 人 的 形式 出 现在 网 站 上 ,与 消费 者 进行 商 
业 活 动 。 互 联网 上 的 C2C 网 站 有 很 多 ， 知 名 的 网 站 有 易趣 网 、 淘 宝 网 、 拍 拍 网 和 百度 。 


25.1.2 ”按照 商品 主体 分 类 


一 些 购物 网 站 是 针对 某 一 种 或 一 类 商品 而 设 的 站 点 ， 按 销售 产品 类 型 分 类 ， 可 分 为 电器 购物 网 站 、 
服装 购物 网 站 、 食 品 购物 网 站 、 首 饰 购物 网 站 等 。 
1 电器 购物 网 站 
主要 销售 彩电 、 冰 箱 、 洗 衣 机 、 空 调 、 手 机 、 数 码 相机 、MP3、 厨 卫 家电 、 小 家 电 、 办 公家 电 等 ， 
如 国美 电器 网 站 和 数码 相机 购物 网 。 
2. 服装 购物 网 站 
主要 以 销售 服装 为 主 ， 可 以 是 男装 、 女 装 、 内 衣 、 了 孕 婴 童装 、 婚 纱 礼服 、 运 动 装 、 休 闲 装 、 家 居 服 、 
羽绒 服 、 工 作 服 、 品 牌 服装 、 帽 子 、 围 巾 、 领 带 、 腰 带 、 袜 子 、 眼 镜 等 。 如 淘宝 网 站 和 品牌 服饰 网 站 。 
3 食品 购物 网 站 
主要 以 食品 为 主 ， 可 以 是 休闲 食品 、 水 果 、 蔬 菜 、 粮 油 、 冲 调 品 、 饼 干 蛋糕 、 婴 幼 食品 、 果 汁 饮料 、 
酒 类 、 茶 叶 、 调 味 品 、 方 便 食品 和 早餐 食品 等 ， 如 我 买 网 和 水 果 购物 网 站 。 
4. 首饰 购物 网 站 

以 首饰 产品 为 主 ， 包 括 耳 饰 、 头 饰 、 胸 饰 、 腕 饰 、 腰 饰 等 类 别 ， 具 体 包括 戒指 、 耳 环 、 项 链 等 。 
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ASP 基础 





ASP (Active Server Pages) 是 一 种 服务 器 端的 网 页 设计 技术 . 可 以 将 Script 脚本 程序 直接 加 在 HTML 
网 页 上 ， 从 而 轻松 读 取 数据 库 中 的 内 容 ， 也 可 以 轻易 地 集成 现 有 的 客户 端 VBScript 和 DHTML. 输出 动 
态 、 互 动 内 容 的 网 页 。 本 节 将 详细 介绍 VBScript 脚本 语言 的 基础 知识 。 


25.2.1 变量 





变量 是 指 在 程序 的 运行 过 程 中 随时 可 以 发 生变 化 的 量 ， 也 就 是 程序 中 数据 的 临时 存放 场所 。 在 程序 
代码 中 可 以 只 使 用 一 个 变量 . 也 可 以 使 用 多 个 变量 。 变 量 中 可 以 存放 语句 、 数 值 、 日 期 以 及 属性 等 。 
1. 声明 变量 

在 VBScript 脚本 语言 中 ， 可 以 使 用 Dim 语句 、Public 语句 或 Private 语句 显 式 声 明 变 量 。 例 如 ,使 用 
Dim 语句 声明 str 变量 ， 代 码 如 下 所 示 : 








Dim str 


另外 ， 在 声明 变量 时 ， 可 以 使 用 单个 语句 声明 多 个 变量 ， 只 需要 使 用 去 号 分 隔 变量 即 可 。 例如， 使 
用 Dim 语句 同时 声明 4 个 变量 ， 代 码 如 下 所 示 : 


Dim a,b,c,d 


在 VBScript 脚本 语言 中 ,直接 使 用 变量 名 是 一 种 隐 式 声明 变量 的 简单 方式 。 但 这 并 不 是 一 种 好 的 编 
程 习惯 , 因为 这 样 有 时 会 由 于 变量 名 被 拼写 错误 而 导致 运行 程序 出 现 意外 的 结果 。 因此 , 最 好 使 用 Option 
Explicit 语句 指定 显 式 声明 变量 ， 并 将 其 作为 程序 的 第 一 条 语句 。 
2. 变量 的 作用 域 与 存活 期 

变量 的 作用 域 由 它 的 声明 位 置 决定 。 如 果 在 过 程 内 部 声明 变量 ， 则 只 有 在 该 过 程 中 的 代码 才 可 以 访 
问 或 更 改变 量 值 ， 此 时 变量 具有 局 部 作用 域 并 被 称 为 过 程 级 变量 。 如 果 在 过 程 之 外 声明 变量 ， 则 该 变量 
可 以 被 脚本 语言 中 所 有 过 程 识 别 ， 称 为 Script 级 变量 ， 具有 全 局 作用 域 。 

变量 存在 的 时 间 称 为 存活 期 。 全 局 变量 的 存活 期 从 被 声明 开始 一 直到 脚本 运行 结束 。 对 于 局 部 变量 ， 
存活 期 仅 是 该 过 程 运行 的 时 间 ， 该 过 程 结 束 后 ， 该 变量 也 随 之 消失 。 
3. 给 变量 赋值 

创建 表达 式 为 变量 赋值 时 ,将 变量 名 称 放置 在 表达 式 的 左 侧 ， 要 赋 的 值 放置 在 表达 式 的 右 侧 ， 其 格 
式 如 下 所 示 : 



































Num = 100 


25.2.2 ”常量 


常量 是 具有 一 定 含义 的 名 称 . 用 于 代替 数字 或 字符 串 . 并 且 其 值 从 不 改变 。 在 VBScript 脚本 程序 中 
可 以 使 用 Const 语句 创建 用 户 自 定义 的 常量 。 
使 用 Const 语句 可 以 创建 名 称 具 有 一 定 含义 的 字符 串 型 或 数值 型 常量 , 并 给 它们 赋 原 义 值 。 例 如 , 为 
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MyName 常量 赋 字 符 串 型 值 . 为 MyAge 常量 赋 数 值 型 值 ， 代 码 如 下 所 示 : 


Const MyName = "Tom" 
Const MyAge = 23 





字符 串 型 文字 包含 在 两 个 引号 之 间 ("") .这 是 为 了 区 别 字符 串 型 和 数值 型 常量 。 而 日 期 型 文字 和 时 
间 型 文字 则 包含 在 两 个 井 号 (##) 之 间 ， 代 码 如 下 所 示 : 





Const MyDay = #1985-06-01# 
25.2.3 ”数据 类 型 


数据 类 型 描述 变量 可 以 包含 的 信息 的 种 类 ， 每 种 编程 语言 都 有 很 多 的 数据 类 型 ， 如 字符 型 、 整 型 、 
浮 点 型 等 。 但 在 VBScript 中 将 各 种 各 样 的 信息 统统 归纳 在 一 起 叫做 Variant 类 型 ， 然 后 在 Variant 的 子 类 
型 中 再 进行 详细 分 类 ，Variant 类 型 的 特点 是 根据 变量 的 值 自动 判断 子 类 型 ， 并 根据 情况 自动 进行 转换 ， 
不 必 事 先 对 变量 进行 数据 类 型 声明 。 数 值 子 类 型 为 各 种 各 样 的 数值 ， 在 Variant 中 又 可 以 分 为 如 下 几 种 。 

Byte: 包含 0 一 255 之 间 的 整数 。 

Integer， 包含 -32 768 一 32 767 之 间 的 整数 。 

Currency: 包含 -922 337 203 685 477.5808 一 922 337 203 685 477.5807。 

Long: 包含 -2 147 483 648 一 2 147 483 647 之 间 的 整数 。 

Single: 包含 单 精度 浮 点 数 , 负数 范围 为 -3.402823E38 一 一 1.401298E-45, 正 数 范围 为 1.401298E-45 一 
3.402823E38。 

Double: 包含 双 精度 浮 点 数 ， 负 数 范围 从 -1.79769313486232E308 一 -4.94065645841247E-324， 正 数 
范围 为 4.94065645841247E-324 一 1.79769313486232E308。 

在 选取 数据 的 类 型 时 ， 要 根据 实际 需要 进行 ， 如 果 能 够 使 用 小 的 就 尽量 选用 小 的 ， 这样 占用 内 存 较 
少 ， 运 行 速 度 比较 快 。 

字符 串 类 型 .字符 串 类 型 的 数据 用 string 表示 .要 放 在 双 引 号 之 间 。 

日 期 类 型 : 日 期 类 型 的 数据 用 Date 表示 ， 要 放 在 两 个 # 之 间 ， 如 #2005-1-26#。 

布尔 类 型 : 布尔 类 型 的 数据 用 boolean 表示 , 有 两 个 值 True 和 False, 布尔 值 和 数字 有 如 下 关系 : False 
相当 于 0，True 相当 于 -1。 

对 象 类 型 : 对 象 类 型 的 数据 用 Object 表示 。 

空 值 : 空 值 (Null) 表示 不 含 任何 数据 。 

未 定义 : 未 定义 Empty 表示 数据 未 被 初始 化 ， 也 就 是 变量 没有 被 赋值 。 

错误 数据 ， 错误 数据 Error 包含 错误 号 ， 可 以 使 用 产生 的 错误 号 来 对 当前 错误 进行 解释 。 


25.2.4 ”运算 符 


VBScript 中 的 运算 符 可 分 为 4 类 : 算术 运算 符 、 比 较 运算 符 、 连 接 运算 符 、 逻 辑 运算 符 。 当 表达 式 
由 多 个 运算 符 组 成 时 ， 将 按照 一 个 顺序 计算 表达 式 . 这 个 顺序 被 称 为 运算 符 优先 级 。 通 常情 况 下 ， 首 先 
计算 算术 运算 符 . 然后 计算 比较 运算 符 . 最 后 计算 逻辑 运算 符 。 连 接 运 算 符 的 优先 级 在 算术 运算 符 之 后 . 
比较 运算 符 之 前 。 

算术 运算 符 遵循 数学 上 的 先 乘除 后 加 减 、 从 左 至 右 的 原则 。 所 有 的 比较 表达 式 的 优先 级 相同 ， 即 按 
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照 从 左 到 右 的 顺序 计算 比较 运算 符 . 也 可 以 使 用 圆 括 号 改变 优先 级 顺序 . 如 算术 表达 式 3+8/3*(4+6)/5/2 
运算 后 的 值 约 为 5。 


.8 流程 控制 语句 


VBScript 脚本 语言 的 控制 语句 与 其 他 编程 语言 的 控制 语句 的 作用 和 含义 相同 ， 都 是 用 于 控制 程序 的 
流程 ， 以 实现 程序 的 各 种 结构 方式 ， 控 制 语 句 由 特定 的 语句 定义 符 组 成 。 本 节 主 要 讲述 条 件 语句 和 循环 
语句 ， 用 户 通过 学 习 可 以 熟练 应 用 流程 控制 语句 。 


25.3.1 条 件 语 句 


条 件 语句 的 作用 是 对 一 个 或 多 个 条 件 进行 判断 ， 根 据 判 断 的 结果 执行 相关 的 语句 。VBScript 的 条 件 
语句 主要 有 两 种 ， 即 下 Then…Else 语句 和 Select…Case 语句 。 
1. IfThen…Else 语句 

下 Then…Else 语句 根据 表达 式 是 否 成 立 执行 相关 语句 .因此 又 被 称 作 单 路 选择 的 条 件 语 句 。 使 用 下 
Then…Else 语句 的 方法 如 下 所 示 : 

语法 格式 : 























IE Condition Then 
[statements] 
End If 


或 者 : 
IF Condition Then [statements] 


在 于..Then 语句 中 包含 两 个 参数 .分别 为 Condition 和 statements 参数 。 

(1) Condition 参数 : 必要 参数 ， 即 表达 式 (数值 表达 式 或 者 字符 串 表达 式 ) ， 其 运算 结果 为 True 或 
False。 男 外 ， 当 参数 condition 为 Null， 则 参数 condition 将 视 为 False。 

(2) statements 参数 : 由 一 行 或 者 一 组 代码 组 成 ,也 称 为 语句 块 。 但 是 在 单行 形式 中 , 若 没有 Else 子 
句 ， 则 statements 参数 为 必要 参数 。 该 语句 的 作用 是 表达 式 的 值 为 True 或 非 零 时 ,执行 Then 后 面 的 语句 
块 (或 语句 ) ， 否 则 不 作 任 何 操作 。 

If…Then…Else 语句 的 一 种 变形 允许 从 多 个 条 件 中 选择 . 即 添加 ElseIf 子 句 以 扩充 下 …Then…Else 语 
句 的 功能 ， 使 其 可 以 控制 基于 多 种 可 能 的 程序 流程 。 
2. Select…Case 语句 

Select…Case 语句 的 作用 是 判断 多 个 条 件 , 根据 条 件 的 成 立 与 否 执行 相关 的 语句 ,因此 又 被 称 作 多 路 
选择 的 条 件 语句 。 使 用 Select…Case 的 格式 如 下 : 

语法 格式 : 











Select Case testexpression 
[Case expressionlist-n 


[statements-n]] ... 








第 25 章 ASP+Access 





[Case Else 
[elsestatements]] 


End Select 


Select Case 语句 的 语法 具有 以 下 几 个 部 分 : 

(1) testexpression: 必要 参数 ， 任 何 数值 表达 式 或 字符 串 表 达 式 。 

(2) expressionlist-n: Case 语句 的 必要 参数 。 其 形式 为 expression 、expression To expression、Js 
comparisonoperator expression 的 一 个 或 多 个 组 成 的 分 界 列表 。To 关键 字 可 用 来 指定 一 个 数值 范围 。 如 果 
使 用 To 关键 字 ， 则 较 小 的 数值 要 出 现在 To 之 前 。 使 用 Is 关键 字 时 ， 则 可 以 配合 比较 运算 符 ( 除 和 
Like 之 外 ) 来 指定 一 个 数值 范围 。 

(3) statements-n:， 可 选 参数 。 一 条 或 多 条 语句 ， 当 testexpression 匹配 expressionlist-n 中 的 任何 部 分 
时 执行 。 

(4) elsestatements:， 可 选 参数 。 一 条 或 多 条 语句 ， 当 testexpression 不 匹配 Case 子 句 的 任何 部 分 时 
执行 。 

在 Select…Case 语句 中 ， 每 个 Case 语句 都 会 判断 表达 式 的 值 是 否 符合 该 语句 后 面条 件 的 要 求 。 如 果 
条 件 值 为 Tue 时 ， 则 执行 相关 的 语句 并 自动 跳出 条 件 选 择 语句 结构 ， 否 则 继续 查找 与 其 匹配 的 值 。 当 所 
有 列 出 的 条 件 都 不 符合 表达 式 的 值 时 ， 将 执行 Case Else 下 的 语句 然后 再 跳出 条 件 选择 语句 结构 。 


25.3.2 ”循环 语句 


循环 语句 是 可 根据 一 些 条 件 反复 多 次 执行 语句 块 , 直到 条 件 值 为 False 后 才 停 止 循环 .在 编写 代码 时 ， 
通常 使 用 循环 语句 进行 一 些 机 械 的 、 有 规律 性 的 工作 。VBScript 中 的 循环 语句 主要 包括 Do…Loop 循环 语 
句 和 For 循环 语句 。 
1. Do…Loop 语句 

Do…Loop 循环 语句 用 于 控制 循环 次 数 未 知 的 循环 结构 ， 包 含 两 种 书写 方式 ， 如 下 所 示 : 

语法 格式 : 



































Do [{While | Until} condition] 
[statements] 

[Exit Do] 

[statements] 

Loop 


或 者 : 


Do 
[statements 
[Exit Do] 
[statements 


Loop [{While | Until} condition] 





在 该 循环 结构 中 ， 主 要 包含 以 下 两 个 参数 ,其 功能 如 下 。 
(1) condition: 可 选 参数 。 数值 表达 式 或 字符 串 表 达 式 . 其 值 为 True 或 False。 如 果 condition 是 Null. 
则 condition 会 被 当 作 False。 
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(2) Statements: 一 条 或 多 条 命令 ， 它 们 将 被 重复 执行 ， 直 到 condition 为 True。 

在 上 面 的 语句 中 ，Do{WhilelUntil}Loop 型 的 语句 为 先 对 条 件 进行 判断 ， 然 后 决定 语句 是 否 循环 。 而 
Do…Loop{WhilelUntil} 型 的 语句 则 为 先 执行 一 次 循环 ， 然 后 再 决定 循环 是 否 继续 进行 ， 在 这 种 类 型 的 循 
环 语句 中 ， 循 环 体 至 少 执行 一 次 。 

Exit Do 语句 用 于 退出 Do…Loop 循环 。 因 为 通常 只 是 在 某 些 特殊 情况 下 要 退出 循环 (如 要 避免 死 特 
环 )， 所 以 可 在 f…Then…Else 语句 的 True 语句 块 中 使 用 Exit Do 语句。 如 果 条 件 为 False， 循 环 将 照 
常 运行 。 

While…Wend 语句 是 为 那些 熟悉 其 用 法 的 用 户 提供 的 ， 但 是 由 于 While…Wend 缺少 灵活 性 ， 所 以 建 
议 最 好 使 用 Do…ILoop 语句 。 

2. For…Next 语句 

For 循环 语句 用 于 控制 循环 次 数 已 知 的 循环 结构 ， 其 书写 格式 如 下 : 

语法 格式 : 





























For counter = start To end [Step step] 
[statements] 

[Exit For] 

[statements] 

Next [counter] 


For … Next 循环 语句 的 语法 具有 以 下 几 个 部 分 : 

(1) counter， 必 要 参数 。 用 于 循环 计数 器 的 数值 变量 。 这 个 变量 不 能 是 Boolean 或 数组 元 素 。 

(2) start， 必要 参数 。counter 的 初 值 。 

(3) End: 必要 参数 ，counter 的 终 值 。 

(4) Step: 可 选 参数 。counter 的 步 长 。 如 果 没 有 指定 ， 则 step 的 缺 省 值 为 1。 

(5) Statements， 可 选 参数 。 放 在 For 和 Next 之 间 的 一 条 或 多 条 语句 ， 它 们 将 被 执行 指定 的 次 数 。 

除 此 之 外 ,还 有 For Each…Next 循环 语句 ， 它 与 For…Next 循环 语句 类 似 。For Each…Next 不 是 将 
语句 运行 指定 的 次 数 ， 而 是 对 于 数组 中 的 每 个 元 素 或 对 象 集合 中 的 每 一 项 重复 一 组 语句 ， 这 在 不 知道 集 
合 中 元 素 的 数目 时 非常 有 用 。 

Exit For 提供 一 种 退出 For 循环 的 方法 , 只 能 在 For…Next 或 For Each…Next 循环 中 使 用 , Exit For 将 
控制 权 转 移 到 Next 之 后 的 语句 。 在 谋 套 的 For 循环 中 使 用 时 ，Exit For 将 控制 权 转 移 到 循环 所 在 位 置 的 
上 一 层 嵌 套 循环 。 
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本 节 主 要 讲述 ASP 提供 的 6 种 内 置 对 象 . 包括 Request 对 象 . Response 对 象 . Application 对 象 . Server 
对 象 、Session 对 象 和 ObjectContext 对 象 。 这 些 对 象 可 以 使 用 户 通过 浏览 器 实现 请 求 发 送信 息 、 响 应 浏览 
器 以 及 存储 用 户 信息 等 功能 。 


25.4.1 Request 对 象 











Request 对 象 用 于 访问 用 HITP 请 求 传递 的 信息 . 也 就 是 客户 端 用 户 向 服务 器 请 求 页 面 或 者 提交 表单 
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时 所 提供 的 所 有 信息 . 包括 HTML 表格 用 POST 方法 或 GET 方法 传递 的 参数 、 客户 端 用 户 浏览 器 的 相关 
信息 、 保 存在 这 些 域 中 浏览 器 的 cookies、 附 加 在 页 面 URL 后 的 参数 信息 。 

Request 对 象 的 属性 和 方法 各 有 一 个 ,而 且 都 不 经 常 使 用 。 但 是 ,Request 对 象 还 提供 了 若干 个 集合 
这 些 集合 可 以 用 于 访问 客户 端 请 求 的 各 种 信息 。 在 Request 对 象 的 所 有 集合 中 ， 最 经 常 使 用 的 是 Form 集 
合 和 QueryString 集合 ， 它 们 分 别 包含 客户 端 使 用 POST 方法 发 出 的 信息 和 使 用 GET 方法 发 出 的 信息 。 
1. 使 用 Request 对 象 

当 用 户 在 浏览 器 地 址 栏 中 输入 网 页 的 URL 地 址 访问 网 页 ， 就 是 通过 GET 方法 向 服务 器 发 布 信息 . 
而 发 送 的 信息 可 以 从 浏览 器 地 址 栏 的 URL 地 址 中 看 到 。POST 方法 只 有 通过 定义 <form> 标 签 的 method 
属性 为 “post” 时 才 会 被 使 用 。 
2. 访问 Request.QueryString 集合 

当 用 户 使 用 Get 方法 传递 数据 时 ， 所 提交 的 数据 会 被 附加 在 查询 字符 串 (QueryString) 中 一 起 提交 
到 服务 器 端 。QueryString 集合 的 功能 就 是 从 查询 字符 串 中 读 取 用 户 提交 的 数据 。 访 问 QueryString 集合 项 
的 语句 如 下 所 示 : 








Value = Request.QuerySstring (Key) 





其 中 ,参数 Key 的 数据 类 型 为 String， 表 示 要 提取 的 HTTP 查询 字符 串 中 变量 的 名 称 。 
3. 访问 Request.Form 集合 

Get 方法 有 一 个 缺点 就 是 URL 字符 串 的 长 度 在 被 浏览 器 及 服务 器 使 用 时 有 一 些 限制 ， 而 且 会 将 某 些 
希望 隐藏 的 数据 暴露 出 来 。 所 以 ,为 了 避免 以 上 问题 ， 可 以 设置 表单 使 用 Post 方法 传递 数据 ， 代 码 如 下 
所 示 : 


<form name="forml" method="post" action="Check.asp"> 


在 上 面 的 语句 中 ， 键 值 被 存储 在 HTTP 请 求 主体 内 发 送 ， 这 样 就 可 以 使 用 Request.Form 集合 获取 
HTML 表单 中 的 信息 ， 其 使 用 方法 如 下 : 





Value = Request.Form(name) 
Form 集合 同样 包含 有 三 个 属性 . 即 Count、Item 和 Key。 
25.4.2 ”获取 验证 字段 


在 Request 对 象 中 ，ClintCerificate 集合 从 Web 浏览 器 发 布 请 求 中 获取 验证 字段 。 如 果 Web 浏览 器 使 
用 SSL3.0/PCT1 协议 (以 https:// 开 头 的 URL. 而 不 是 http://) 连 接 服务 器 及 服务 器 请 求 验证 , 则 浏览 器 将 发 
送 验证 字段 。 如 果 没 有 发 送 验证 ，ClintCerificate 集合 将 返回 Empty ( 空 值 )。 语 法 格式 如 下 : 














Request .ClintCerificate (Key[subfield]) 


在 上 述 语法 结构 中 包含 有 两 个 参数 .其 含义 如 下 : 

(1) Key: 该 参数 指定 要 获取 的 验证 字段 名 称 。 

(2) subfield: 可 选 参数 ， 用 于 按 subject 或 Issuer 关键 字 检 索 单独 的 字段 。 此 参数 作为 一 个 后 缀 添加 
到 Key 参数 中 .例如 .IssuerO 或 subjectCN。 

下 面 的 代码 通过 获取 object 关键 字 测 试 客户 端 验证 是 否 存在 : 
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< 

IE lenl(request.clientcertificate 
("object")) =0 
Response.wIite ("no client 
Certificate was presented") 

End if 

%> 


25.4.3” 读 取 参 数 信 息 与 Cookie 数据 


通过 Request 对 象 的 QueryString 集 合 和 Cookies 集 合 可 以 获取 URL 地 址 中 的 参数 信息 和 Cookie 数 据 。 
1. 读 取 网 址 的 参数 信息 

通过 该 对 象 的 QueryString 集合 可 以 获取 URL 地 址 中 的 参数 信息 , 即 当 Method="GET" (或 者 省 略 其 
属性 ) 作为 请 求 提交 时 ， 其 <FORM> 标 签 中 的 所 有 值 将 依附 于 用 户 请 求 的 URL 后面， 并且 每 个 值 均 为 只 
读 方式 。 语 法 结构 如 下 : 














Reques. QueryString(Variable) [(INdex) | .Count] 


Reques. QueryString( 参 数 ) 的 值 是 出 现在 QueryString 中 所 有 参数 的 值 的 数组 ， 其 中 参数 含义 如 下 : 

(1) Variable: 必要 参数 。 在 HTTP 查询 字符 串 中 要 取 回 的 变量 名 称 。 

(2) Index， 可 选 参数 。 为 一 个 变量 规定 多 个 值 之 一 ， 从 1 到 Reques. QueryString(Variable). Count 

(3) . Count: 统计 URL 地 址 中 包含 相同 参数 名 称 的 个 数 。 

另外 ,该 集合 在 获取 同一 个 表单 时 ， 多 个 元 素 可 以 有 相同 的 名 字 。 

而 在 通过 GET 方式 传送 数据 时 , 一 般 可 以 分 为 三 种 方式 。 一 是 直接 在 URL 内 输入 超 链 接 , 包含 "? ” 
后 的 参数 ， 如 http://localhost/XNML/xx.asp?uname=pname&pwd=456:; 二 是 在 超 链接 中 使 用 ， 如 <A hre 仁 
“xx.asp7uname=pname~-pwd=123”>; 三 是 使 用 Form 表单 ， 如 <FORM action=“xx.asp”method=GET>。 
2. 读 取 Cookie 数据 

Cookie 常用 来 对 用 户 进行 识别 。Cookie 是 一 种 服务 器 留 在 用 户 计算 机 中 的 小 文件 。 每 当 同一 台 计 算 
机 通过 浏览 器 请 求 页 面 时 ， 这 人 台 计 算 机 就 会 发 送 Cookies。 通 过 ASP 代码 可 以 创建 并 取 回 Cookie 的 值 。 

根据 用 户 的 请 求 , 用 户 系 统 发 出 的 所 有 Cookie 的 值 的 集合 , 这 些 Cookie 仅 对 相应 的 域 有 效 , 每 个 成 
员 均 为 只 读 。 

语法 格式 : 

















Variablename=request .Cookies (name) [ (key) | .attribute] 





其 中 ，Cookies 集合 的 参数 含义 如 下 。 

(1) name: 必要 参数 ， 指 Cookie 的 名 称 。 

(2) value: 必要 参数 (对 于 response. Cookies 命令 ) ， 指 Cookie 的 值 。 

(3) attribute: 可 选 参数 ,规定 有 关 Cookie 的 信息 。 例 如 ， 该 参数 的 值 包含 的 Domain 是 指 Cookie 
仅 送 往 到 达 该 域 的 请 求 ，Expires 指 Cookie 的 失效 日 期 ， 如 果 没有 规定 日 期 ，Cookie 会 在 session 结束 时 
失效 : HasKeys 是 指 规定 Cookie 是 否 拥有 Key (这 是 唯一 一 个 可 与 Tequest cookies 命令 一 起 使 用 的 属性 ) : 
了 Path 是 指 Cookie 仅 送 往 到 达 此 路 径 的 请 求 ， 如 果 没 有 设置 . 则 使 用 应 用 程序 的 路 径 : Secure 指示 Cookie 
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是 否 安全 。 

(4) key: 可 选 参数 .规定 在 何 处 赋值 的 Key。 

例如 ， 下 列 代码 主要 用 来 获取 Cookie 值 ， 以 及 获取 Cookie 是 否 拥 有 Key (指定 Cookie 是 否 包含 关 
键 字 )， 其 中 “My Cookie 为 Cookie 的 名 称 。 


<%=Request. Cookies(‘My Cookie”) 多 > 
<% Request. Cookies (\MY Cookie”) 
.HasKeys%®> 


25.4.4” 读 取 表 单数 据 和 服务 端 信 息 


使 用 Request 对 象 的 Form 集合 和 Server Variables 集合 可 以 获取 表单 数据 和 服务 端 信息 ， 介 绍 如 下 。 
1. 读 取 表 单传 递 的 数据 

Form 集合 可 以 获取 用 POST 方法 从 浏览 器 传送 来 的 值 . 这 些 值 由 Form 表单 提交 。 通 过 设置 
Method-“POST”， 所 有 作为 请 求 提交 的 <FORM> 标 签 中 值 的 集合 中 ， 每 个 成 员 均 为 只 读 。 语 法 格式 : 

Request. Form (Element) [(Index) ] . 

Count] 


在 该 语法 中 包含 两 个 参数 ,其 中 Element 参数 是 指定 集合 要 检索 的 表格 元 素 的 名 称 。 而 Index 参数 为 
可 选 参数 , 使 用 该 参数 可 以 访问 某 参数 中 多 个 值 中 的 一 个 , 它 可 以 是 1 到 Request Form (parameter) .Count 
之 间 的 任意 整数 。 

Form 集合 按 请 求 正 文中 参数 的 名 称 来 索引 。Request Form (Element) 的 值 是 请 求 正文 中 所 有 element 
值 的 数组 。 通 常用 Request Form (Element) . Count 来 确定 参数 中 值 的 个 数 。 如 果 参 数 未 关联 多 个 值 ， 则 
计数 为 1， 如 果 找 不 到 参数 ， 计 数 为 0。 

2. 读 取 服 务 器 端 信息 

ServerVariables 集合 保存 了 随 HITP 请 求 一 起 传送 的 HTTP 报头 的 信息 , 通过 它 可 以 获取 有 关 服 务 器 

端的 信息 与 HITP 报头 ， 也 可 根据 不 同 的 需要 用 Server Variables 集合 获取 服务 器 端 环境 变量 。 











Request. ServerVariables (variable) 


在 实际 应 用 中 ， 该 集合 主要 有 两 种 方法 : 其 一 ， 获 取 服 务 器 环境 变量 : 其 二 ,限制 用 户 访问 。 
可 以 使 用 如 下 代码 输出 ServerVariable 集合 中 所 有 的 服务 器 环境 变量 : 








Dim item 

For Each item In Request. Server 
Variables 

Response.Write item&g“<br>” 

Next 


25.4.5 ”Response 对 象 属性 


Response 对 象 用 于 向 客户 端 浏览 嚣 发 送 数 据 ， 用 户 可 以 使 用 该 对 象 将 服务 器 的 数据 以 HTML 的 格式 
发 送 到 用 户 端的 浏览 器 . Response 与 Request 组 成 了 一 对 接收 . 发 送 数据 的 对 象 . 这 也 是 实现 动态 的 基础 。 
Response 对 象 也 提供 一 系列 的 属性 ， 可 以 读 取 和 修改 ， 使 服务 器 端的 响应 能 够 适应 客户 端的 请 求 ， 
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这 些 属 性 通常 由 服务 器 设置 。 
1. Buffer 属性 
该 属性 用 于 指示 是 否 是 缓冲 页 输出 ，Buffer 属性 的 语法 格式 如 下 : 























Response.Buffer = Flag 

















其 中 ，Flag 值 为 布尔 类 型 数据 。 当 Flag 为 False 时 ， 服 务 器 在 处 理 脚本 的 同时 将 输出 发 送 给 客户 端 ; 
当 Flag 为 Tue 时 ， 服 务 器 端 Response 的 内 容 先 写 入 缓冲 区 ， 脚 本 处 理 完 后 再 将 结果 全 部 传递 给 用 户 。 
Buffer 属性 的 默认 值 为 False。 
2. CacheControl 属性 

该 属性 指定 了 一 个 脚本 生成 的 页 面 是 否 可 以 由 代理 服务 器 缓存 。 为 这 个 属性 分 配 的 选项 ， 可 以 是 字 
符 串 Public 或 者 是 Private。 

启用 和 禁止 脚本 生成 页 面 的 缓存 ， 可 分 别 使 用 如 下 代码 : 








<% 

Response.CacheControl="public" 
"启用 缓存 

Response.CacheControl="Private" 
"禁止 缓存 

%> 


3. Charset 属性 
该 属性 将 字符 集 名 称 附 加 到 Response 对 象 中 的 Content-type 标题 的 后 面 ， 用 来 设置 Web 服务 器 响应 
给 客户 端的 文件 字符 编码 。 其 语法 如 下 : 





Response.charset (字符 集 名 称 ) 


例如 : 


Response.charset="GB2312" 
' 简体 中 文 显 示 
4. ContentType 属性 
ContentType 属性 用 来 指定 响应 的 HTTP 内 容 类 型 。 如 果 未 指定 ， 则 默认 是 texWHTML。 其 语法 格式 
如 下 : 





Response.ContentType = 内 容 类 型 


一 般 来 说 ，ContentType 都 以 “类 型 / 子 类 型 ”的 字符 串 来 表示 . 通常 有 texWHTML、image/GIF、 
image/JPEG、text/plain 等 。 
5. Expires 属性 

该 属性 指定 浏览 器 上 缓冲 存储 的 页 距 过 期 的 时 间 。 如 果 用 户 在 某 个 页 过 期 之 前 又 回 到 此 页 ， 就 会 显 
示 缓 冲 区 中 的 版 本 。 这 种 设置 有 助 于 数据 的 保密 。 语 法 格式 如 下 : 




















Response.Expires= 分 钟 数 
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6. ExpiresAbsolute 属性 





该 属性 指定 缓存 于 浏览 器 中 的 页 的 到 期 日 期 和 时 间 。 在 未 到 期 之 前 ， 若 用 户 返 回 到 该 页 ， 该 缓存 就 
显示 : 如 果 未 指定 时 间 ， 该 主页 当天 午夜 到 期 ; 如 果 未 指定 日 期 ， 则 该 主页 在 脚本 运行 当天 的 指定 时 间 
到 期 。 语 法 格式 如 下 : 








Response.ExpiresAbsolute = 日 期 时 间 


7. lsClientConnected 属性 

该 属性 为 只 读 ， 返 回 客户 是 否 仍然 连接 和 下 载 页 面 的 状态 标志 。 有 时 候 程序 脚本 要 花 比较 长 的 时 间 
去 处 理 ， 如 果 客 户 端 用 户 没有 耐心 等 待 而 离 去 ， 而 服务 器 端 将 脚本 执行 下 去 显然 没有 任何 意义 ， 这 时 候 
就 可 以 通过 IsClientConnected 属性 判断 客户 端 是 否 仍然 与 服务 器 连接 来 决定 程序 是 否 继续 执行 。 该 属性 
返回 一 个 布尔 值 。 
8. PICS 属性 

PICS 属性 用 来 设置 PICS 标签 . 并 把 响应 添加 到 标 头 (Response header)。PICS 是 一 个 负责 定义 互联 网 
网 络 等 级 及 等 级 数据 的 W3C 团队 。 该 属性 的 语法 格式 如 下 : 


Respon 




















se. Pics (PICS 字符 串 ) 


9. Status 属性 
Status 属性 用 来 设置 Web 服务 器 要 响应 的 状态 行 的 值 。HITP 规格 中 定义 了 Status 值 。 该 属性 设置 语 


法 如 下 : 


Respon 


25.4.6 





se.Status = "状态 描述 字符 串 " 


Response 对 象 方法 


Response 对 象 提供 了 一 系列 的 方法 ， 用 于 直接 处 理 返回 给 客户 端 而 创建 的 页 面 内 容 。 
1.AppendTolog 方法 

Response.AppendTolog 方法 将 字符 串 添加 到 Web 服务 器 日 志 条 目的 末尾 。 由 于 IIS 日 志 中 的 字段 用 过 
号 分 隔 ， 所 以 该 字符 串 中 不 能 包含 逗号 (`“，) ， 而 且 字符 串 的 最 大 长 度 为 80 个 字符 。 语 法 格式 如 下 : 


Respon 


se.AppendTolog" 要 记录 的 字符 串 " 


2. AddHeader 方 法 
Response.AddHeader 方法 用 指定 的 值 添加 HITP 标题 .该 方法 常常 用 来 响应 要 添加 新 的 HITP 标题 。 
它 并 不 代替 现 有 的 同名 标题 。 一 旦 标题 被 添加 ， 就 不 能 删除 。 具 体 语 法 格式 如 下 : 





Respon. 


该 语句 


se.AddHeader Name, Value 





包含 两 个 参数 内 容 ， 其 含义 如 下 。 


(1) Name: 新 头 部 变量 的 名 称 。 

(2) Value: 新 头 部 变量 的 初始 值 。 
3. Flush 方法 

如 果 将 Response.Buffer 设置 为 True. 那么 使 用 Response Flush 方法 可 以 立即 发 送 IIS 缓冲 区 中 的 所 有 
当前 页 。 如 果 没 有 将 Response.Buffer 设置 为 Tue， 则 使 用 该 方法 将 导致 运行 时 错误 。 
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4. Clear 方法 

如 果 将 Response Buffer 设置 为 True， 那 么 使 用 Response.Clear 方法 可 以 删除 缓冲 区 中 的 所 有 HIML 
输出 。 如 果 没 有 将 Response .Buffer 设置 为 Tue， 则 使 用 该 方法 将 导致 运行 时 错误 。 
5. End 方法 

Response.End 方法 使 Web 服务 器 停止 处 理 脚 本 并 返回 当前 结果 ,文件 中 剩余 的 内 容 将 不 执行 。 

当 Buffer 属性 值 为 True 时 ， 服 务 器 将 不 会 向 客户 端 发 送 任何 信息 ， 直 到 所 有 程序 执行 完成 或 者 遇 到 
Response Flush 或 者 Response.End 方法 ， 才 将 缓冲 区 的 信息 发 送 到 客户 端 。 

有 时 用 户 可 能 希望 在 页 面 结束 之 前 的 某 些 点 上 停止 代码 的 执行 ， 这 可 以 通过 调用 Response .End 方法 
刷新 所 有 的 当前 内 容 到 客户 并 终止 代码 的 进一步 执行 。 
6. BinaryWrite 方法 

Response.BinaryWrite 方法 主要 用 于 向 客户 端 写 非 字 符 串 信息 (如 客户 端 应 用 程序 所 需要 的 二 进 制 数 
据 等 )。 语 法 格式 如 下 : 








Response.BinaryWrite 二 进 制 数 据 


7. Write 方法 
Response.Write 是 Response 对 象 最 常用 的 方法 ， 该 方法 可 以 向 浏览 器 输出 动态 信息 ， 其 语法 格式 
如 下 : 


Response.Write 任何 数据 类 型 





只 要 是 ASP 中 合法 的 数据 类 型 ， 都 可 以 用 Response.Wiite 方法 来 显示 。 
8. Redirect 方法 

Response.Redirect 可 以 用 来 将 客户 端的 页 面 重 定 向 到 一 个 新 的 页 面 ， 有 页 面 转换 时 常用 这 个 方法 。 
9. Response.Redirect URL 

URL 是 指 需 要 转 到 的 相应 的 页 面 。 例 如 对 于 一 个 简单 的 登录 模块 ， 当 用 户 名 和 密码 正确 时 转向 欢迎 
页 面 ， 否 则 转向 错误 信息 页 面 。 


25.4.7 Response 对 象 集合 


在 上 述 的 Request 对 象 中 已 经 介绍 过 . 通过 Cookie 集合 . 来 读 取 存储 在 客户 端的 信息 。 然 后 通过 
Response 对 象 的 Cookie 集合 送 回 给 用 户 端 浏览 器 。 如 果 指定 的 Cookie 不 存在 , 则 系统 会 自动 在 客户 端的 
浏览 器 中 建立 新 的 Cookie。 使 用 Response. Cookies 的 语法 如 下 。 























Response. Cookies (name) [ (key)|. 


attribute]=value 


各 参数 的 意义 如 下 。 

(1) name: 表示 Cookie 的 名 称 。 用 户 为 Cookie 指定 名 称 后 就 可 以 在 Request.Cookie 中 使 用 该 名 称 获 
取 相 应 的 Cookie 值 。 

(2) key: 表示 该 Cookie 会 以 目录 的 形式 存放 数据 。 如 果 指 定 了 key， 则 Cookie 形成 了 一 个 字典 ， 
而 key 的 值 将 被 设 为 Cookie value。 

(3) attribute: 定义 了 与 Cookie 自身 有 关 的 属性 。 
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例如 .创建 一 个 名 为 “firstname” 的 Cookie 并 为 它 赋值 “Murphy” ， 可 以 使 用 如 下 代码 : 


< 

Response. Cookies ("firstname")= 
"Murphy" 

务 > 


Cookie 其 实 是 一 个 标签 。 当 访问 一 个 需要 唯一 标识 的 Web 站 点 时 会 在 用 户 的 硬盘 上 留 下 标记 ,下 一 
次 访问 该 站 点 时 ， 该 站 点 的 页 面 就 会 查找 这 个 标记 ， 以 确认 该 浏览 者 是 否 访问 过 本 站 点 。 每 个 站 点 都 可 
以 有 自己 的 标记 Cookie， 并 且 标 记 的 内 容 可 以 由 该 站 点 的 页 面 随时 读 取 。 

通常 情况 下 , 客户 端 浏览 器 只 有 对 创建 Cookie 的 目录 中 的 页 面 提出 请 求 时 才 将 Cookie 随同 请 求 发 往 
服务 器 。 通 过 指定 path 属性 可 以 指定 站 点 中 何 处 这 个 Cookie 合法 . 并 且 这 个 Cookie 将 随同 请 求 被 发 送 。 
如 果 Cookie 随 着 整个 站 点 的 页 面 请 求 发 送 ， 则 应 设置 path 为 “/。 

如 果 设 置 了 Domain 属性 ， 则 Cookies 将 随同 对 域 的 请 求 被 发 送 。 域 属性 表明 Cookie 由 哪个 网 站 创 
建 和 读 取 ， 默认 情 况 下 ，Cookie 的 域 属性 设置 为 创建 Cookie 的 网 站 。 


25.4.8 Application 对 象 


ASP 提供 了 一 个 Application 对 象 ， 该 对 象 的 作用 域 是 全 局 范围 ， 即 它 不 仅 可 以 被 单独 的 用 户 访问 ， 
而 且 可 以 被 应 用 程序 中 的 所 有 用 户 访问 。 这 与 一 般 的 应 用 程序 中 的 全 局 变量 相同 。Application 对 象 可 以 
在 全 局 范围 内 存储 变量 和 信息 ,该 应 用 程序 内 所 有 在 ASP 页 面 中 运行 的 脚本 都 可 以 访问 这 些 数 据 。 

Application 对 象 是 一 个 应 用 程序 级 的 对 象 , 在 同一 虚拟 目录 及 其 子 目录 下 的 所 有 .asp 文件 构成 了 ASP 
应 用 程序 。 使 用 Application 对 象 可 以 在 给 定 的 应 用 程序 的 所 有 用 户 之 间 共 享 信息 ， 并 在 服务 器 运行 期 间 
持久 地 保存 数据 。 而 且 ，Application 对 象 还 有 控制 访问 应 用 层 数 据 的 方法 和 可 用 于 在 应 用 程序 启动 和 停 
止 时 触发 过 程 的 事件 。 

Application 对 象 的 方法 允许 删除 应 用 程序 集合 中 的 值 ， 控 制 对 应 用 程序 集合 中 变量 的 并 发 访问 。 
Application 对 象 提供 了 两 个 集合 ， 这 两 个 集合 可 以 用 来 访问 存储 于 应 用 程序 中 的 变量 和 对 象 。 

所 有 的 用 户 共用 一 个 Application 对 象 ， 当 网 站 服务 器 一 开 . 就 创建 了 Application 对 象 ， 所 有 的 用 户 
都 可 以 对 Application 进行 修改 。 利 用 Application 这 一 特性 ， 可 以 方便 地 创建 各 种 常用 网 页 。 

对 象 没有 自己 的 属性 ， 但 是 使 用 Application 对 象 ， 用 户 可 以 根据 自己 的 需要 定义 属性 ， 保 存 一 些 共 
有 的 信息 ， 其 语法 格式 如 下 : 


Application ("属性 名 ")= 属 性 定义 






































例如 : 

<% 

Application ("welstr")= "欢迎 你 的 到 来 ! " 
和 


上 述 语句 就 定义 了 一 个 名 为 “welstr 的 属性 。 需 要 理解 的 是 . 由 于 Application 对 象 对 于 多 用 户 共享 , 
因此 与 Session 对 象 有 本 质 的 区 别 。Application 变量 不 会 因为 某 一 个 甚至 全 部 用 户 离开 就 消失 .一 旦 建立 
了 Application 变量 . 它 就 会 一 直 存在 .直到 网 站 关闭 或 者 这 个 Application 被 卸载 。 
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25.4.9 Server 对 象 


Server 对 象 只 提供 了 一 个 属性 ， 但 是 它 提供 了 7 种 方法 用 于 格式 化 数据 、 管 理 网 页 执行 、 管 理 外 部 
对 象 和 组 件 执行 以 及 处 理 错误 . 这 些 方法 为 ASP 的 开发 提供 了 很 大 的 方便 。 

Server 对 象 提供 对 服务 器 上 的 方法 和 属性 的 访问 . 最 常用 的 方法 是 创建 ActiveX 组 件 的 实例 。 其 他 的 
方法 用 于 将 URL 或 HTML 编码 成 字符 串 、 将 虚拟 路 径 映 射 到 物理 路 径 以 及 设置 脚本 的 超时 时 限 。 
ScriptTimeout 属性 是 Server 对 象 唯 一 的 一 个 属性 ， 该 属性 用 于 设置 或 者 返回 页 面 的 脚本 在 服务 器 退 
出 执行 和 报告 一 个 错误 之 前 可 以 执行 的 时 间 。 达 到 该 值 后 将 自动 停止 页 面 的 执行 ， 并 从 内 存 中 删除 包含 
可 能 进入 死 循环 的 错误 页 面 或 者 是 长 时 间 等 待 其 他 资源 的 网 页 。 这 会 防止 服务 器 因 存 在 错误 的 页 面 而 过 
载 。 对 于 运行 时 间 较 长 的 页 面 需 增 大 这 个 值 。 语 法 结构 如 下 : 


















































Server. ScriptTimeout [=NumSeconds] 





其 中 ，NumSeconds 为 脚本 在 被 终止 前 可 运行 的 最 大 秒 数 ， 默 认 是 90 秒 。 例 如 ,设置 脚本 的 超时 为 
200 秒 ， 其 代码 如 下 。 


< 名 
Server. ScriptTimeout=200 
务 > 


若 要 查看 所 设置 脚本 执行 的 超时 , 可 以 通过 取 回 ScriptTimeonut 属性 的 当前 值 实现 , 其 代码 如 下 所 示 。 


<% 
Response.write(server.Sscript 
Timeout) 

%> 


25.4.10 ”Session 对 象 


使 用 Session 对 象 可 以 存储 特定 的 用 户 会 话 所 需 的 信息 。 当 用 户 在 应 用 程序 的 不 同 页 面 之 间 切 换 时 ， 
存储 在 Session 对 象 中 的 变量 不 被 清除 。 而 用 户 在 应 用 程序 中 访问 页 时 , 这 些 变 量 始终 存在 。Session 对 象 
拥有 与 Application 对 象 相同 的 集合 ， 并 具有 一 些 其 他 属性 。 

1. Session 对 象 属性 

Session 对 象 提供 的 属性 包括 Timeout 属性 、SessionID 属性 、LCID 属性 和 CodePage 属性 等 。 

(1) Timeout 属性 

Session 对 象 的 Timeout 属性 用 来 设置 Session 的 最 长 时 间 间 隔 . 这 里 所 谓 的 时 间 间 隔 是 指 服务 器 端 从 
最 近 一 次 向 Web 服务 器 提出 要 求 到 下 一 次 向 Web 服务 器 提出 要 求 的 时 间 ， 以 分 钟 为 单位 ， 语 法 如 下 : 

Session. Timeout= 分 钟 数 

(2) SessionID 属性 

SessionID 属性 可 为 每 个 用 户 返 回 一 个 唯一 的 卫 , 此 ID 由 服务 器 生成 . 是 一 个 不 重复 的 长 整数 数字 ， 
语法 如 下 。 


























长 整数 =Session. SessionID 
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例如 : 


<% 
Responsev Write (Session. SessionID) 


%> 
服务 器 会 自动 生成 ID ， 结果 如 下 : 
55702372 


(3) LCID 属性 

LCID 属性 可 设置 或 者 返回 一 个 规定 位 置 或 者 地 区 的 整数 , 诸如 日 期 、 时 间 以 及 货币 等 内 容 都 会 根据 
位 置 或 者 地 区 来 显示 。 

语法 格式 如 下 : 








Session. LCID=LCID 值 


(4) CodePage 属性 
由 于 用 户 来 自 世界 各 地 ， 无 法 事先 编写 各 种 不 同 的 版 本 .所 以 ASP 的 Session 对 象 提供 CodePage 属 








的 字符 集 。 对 于 不 同 的 语言 和 地 区 可 以 使 用 不 同 的 代码 页 。 例 如 ， ANSI 代码 页 1252 用 于 美国 、 英 国 和 
大 多 数 欧洲 语言 ， 代 码 页 932 用 于 日 文字 ， 简 体 中 文 的 代码 页 为 936。 
语法 格式 如 下 : 








Session. CodePage=CodePage 值 


2. Session 对 象 方法 

Session 对 象 允 许 从 用 户 会 话 空间 删除 指定 值 ， 并 根据 需要 终止 会 话 ，Session 对 象 提供 了 三 种 方法 : 
Contents.Remove 方法 、Contents.Remove-All 方法 、Abandon 方法 。 

(1) Contents.Remove 方 法 

Contents.Remove 方法 可 从 Contents 集合 中 删除 一 个 项 目 。 语 法 格式 如 下 : 





Session. Contents.Remove (name |index) 


其 中 name 表示 要 删除 项 目的 名 称 ，index 表示 要 删除 项 目的 索引 号 。 
例如 : 





<% 

Session. ("test 1")= ("First test") 
Session. ("test 2")= ("Second test") 
Session. ("testt3")= ("Third.test") 
Session. Contents.Remove ("text2") 
For Each x In Session Contents 
Response Write(x &"="g& 

Session. Contents. (x)& "<br/>" ) 


Next 
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$> 


输出 结果 如 下 所 示 : 


test l=First tes 
test 3=Third.test 


(2) Contents.RemoveAll 方 法 
与 Contents.Remove 方法 相似 ，Contents RemoveAll 方法 可 从 Contents 集合 中 删除 全 部 项 目 ， 语 法 格 
式 如 下 : 


Session. Contents. RemoveAll() 


(3) Abandon 方法 

Abandon 方法 删除 所 有 存储 在 Session 对 象 中 的 对 象 并 释放 这 些 资源 。 如 果 用 户 明 确 地 调用 Abandon 
方法 ,一旦 会 话 超时 ,服务 器 就 会 删除 这 些 对 象 . 无 法 再 取得 其 变量 值 ， 而且 Session-OnEnd 事件 将 一 起 
被 激活 ， 语 法 格式 如 下 : 


Session. Abandon 


Abandon 方法 被 调用 时 ， 将 按 顺 序 删除 当前 的 Session 对 象 ， 不 过 在 当前 页 中 所 有 脚本 命令 都 处 理 完 
后 , 对 象 才 会 被 真正 删除 。 这 就 是 说 ,在 调用 Abandon 方法 时 ,可 以 在 当前 页 上 访问 存储 在 Session 对 象 
的 变量 ,但 在 随后 的 Web 页 面 上 就 不 行 。 
3. Session 对 象 集合 

Session 对 象 的 数据 集合 有 两 种 ， 分 别 是 Contents 集合 、StaticObject 数据 集合 。 

(1) Contents 数据 集合 

绝 大 部 分 的 Session 对 象 存放 在 Contents 集合 中 , 当 创 建 一 个 新 的 Session 对 象 时 ,其 实 就 是 在 Contents 
集合 中 添加 了 一 项 ， 例 如 下 面 两 条 语句 是 等 效 的 : 











< 多 

Session ("username")= "test" 

Session. contents("username")= "test" 
%> 


Contents 数据 集合 有 三 个 属性 ， 并 提供 了 Remove 和 RemoveAll 方 法 . 

Q@ Item 属性 : 使 用 Item 属性 可 以 访问 或 者 设置 Contents 集合 中 的 一 个 值 。Item 属性 允许 通过 名 字 
访问 和 运用 集合 中 的 值 。 

@ Cont 属性 : Cont 属性 表示 集合 中 存储 的 属性 数目 。 

@ Key 属性 : 使 用 Key 属性 可 以 按 索引 找 出 属性 的 名 字 。 Item 属性 中 存储 的 每 个 值 在 Key 属性 中 都 
有 一 个 条 目 ， 指 定 了 用 于 存储 这 个 值 的 名 字 。 

(2) StaticObject 集合 

StaticObject 集合 包含 所 有 使 用 HTML<objec 人 > 标签 追加 到 Application/Session 的 对 象 。 该 对 象 可 用 了 
确定 对 象 特定 属性 的 值 .， 或 者 用 于 遍历 集合 并 获得 所 有 对 象 的 全 部 属性 .语法 格式 如 下 : 





























Session. StaticObject (对 象 变量 名 称 ) 
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4. Session 对 象 事 件 

Session 对 象 对 应 两 个 事件 : Session-OnStart、Session-OnEnd。 其 中 Session-OnStart 事件 对 应 Session 
对 象 的 起 始 事件 ,每 当 开 始 一 个 新 会 话 . 该 事件 所 定义 的 代码 都 将 被 激活 : Session-OnEnd 事件 对 应 Session 
对 象 的 结束 时 间 ， 当 会 话 终止 或 者 失效 时 ， 触 发 该 事件 。 

这 两 个 事件 的 代码 必须 放 在 Global.asa 文件 中 ,语法 格式 如 下 。 





<script language="vbscript"™" 
Runat="server"> 
Sub Session-Onstart 


End Sub 
Sub Session-OnEnd 


ee Sub 

</script> 

对 象 是 附属 于 用 户 的 ， 所 以 每 位 用 户 都 可 以 拥有 其 专用 的 变量 。 虽 然 每 位 用 户 的 变量 名 称 相同 ,但 
是 其 值 是 不 相同 的 ， 并且 只 有 该 用 户 有 权 对 自己 的 变量 进行 读 写 操作 。 


25.4.11 ObjectContext 对 象 





使 用 ObjectContext 对 象 可 以 提交 或 放弃 一 项 由 Microsoft Transaction Server (MTS ) 管理 的 事务 , MTS 
是 以 组 件 为 主 的 事务 处 理 系 统 ， 可 用 来 进行 开发 、 拓 展 及 管理 高 效能 、 可 伸缩 及 功能 强大 的 服务 器 应 用 
程序 , 所 以 Microsoft 也 在 ASP 中 增加 了 新 的 内 部 对 象 ObjectContext， 以 使 编程 人 员 在 设计 Web 页 面 程 
序 中 直接 应 用 MTS 的 形式 。 

ObjectContext 对 象 用 于 中 止 或 者 提交 当前 的 事务 ， 该 对 象 没有 属性 ， 只 有 用 于 中 止 或 提交 事务 的 方 
法 及 所 触发 的 事件 。 


25.5 


本 章 概要 性 地 介绍 ASP+Access 在 网 站 建设 中 的 应 用 . 主要 内 容 有 购物 类 网 站 分 类 、ASP 基础 、 流 程 
控制 语句 和 ASP 内 置 对 象 ， 为 本 书后 续 的 学 习 打 下 坚实 的 基础 。 主 要 讲述 如 何在 网 站 建设 中 应 用 
ASP+Access， 制 作 吸 引 人 的 网 站 的 一 些 方法 和 相关 技术 ， 接 下 来 我 们 通过 两 个 实例 来 对 本 章 的 内 容 进行 
实践 。 


25.5.1 制作 购物 网 首页 


民众 购物 网 是 一 个 综合 性 的 电子 商务 网 站 . 包含 数码 、 服 饰 、 家 电 等 多 种 类 型 的 商品 。 网 站 以 红色 
为 主 色调 ， 给 购物 者 留 下 一 种 温馨 、 和 舒适 的 感觉 ， 并 且 符 合 商品 的 档次 和 品味 ,主要 练习 添加 图 片 、 设 
置 属性 、 添 加 表格 、 设 置 表格 宽度 和 添加 Flash， 如 图 25-1 所 示 。 
STEP|01 在 文档 中 插入 一 个 宽度 为 920 像素 的 1 行 x4 列 的 表格 ， 并 在 1 列 单元 格 中 插入 一 个 10 行 x1 
列 的 府 套 表格 。 在 前 5 行 单元 格 中 . 插入 LOGO、 公 告 栏 和 搜索 等 素材 图 像 ， 并 在 它们 之 间 留 有 一 个 空 
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行 。 在 表格 的 第 6、7、8 行 单元 格 中 插入 客服 、 提 示 等 相关 图 像 ， 并 空 出 后 两 行 作为 网 站 调查 。 





表格 的 2 列 单元 格 为 10 像素 。 在 3 列 单元 格 中 插入 一 个 6 行 x 1 列 的 谋 套 表格 。 
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民众 代 如 同 


7"24 小 时 客服 热线 
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图 25-1 制作 购物 网 首页 
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设置 父 


STEP|02 设置 第 1 行 单元 格 的 高 度 为 16 像素 ， 并 插入 图 像 及 文字 ， 该 表格 为 网 站 的 快速 链接 。 在 第 2 
行 单元 格 中 插入 制作 好 的 Flash 导航 条 。 在 表格 的 第 3、4 行 单元 格 中 插入 横幅 图 像 ， 通 常 为 网 站 的 宣传 
语 或 服务 宗旨 等 。 在 表格 的 第 5 行 单元 格 中 插入 一 个 5 行 x4 列 的 赃 套 表格 . 合并 第 1 行 单元 格 插入 栏目 
标题 图 像 。 在 其 他 单元 格 中 ,插入 “店铺 ”栏目 的 素材 图 像 及 文字 。 使 用 同样 的 方法 ， 在 表格 的 第 6 行 





单元 格 中 插入 5 行 x4 列 的 谋 套 表格 .并 插入 图 像 及 文字 。 


该 表格 为 “搜索 宝贝 ”功能 。 选 择 下 拉 列 表 框 . 在 【列表 值 】 对 话 框 中 设置 项 目标 签 和 值 。 在 表格 下 面 


插入 一 个 宽度 为 920 像素 的 1 行 x2 列表 格 . 并 在 第 1 列 单元 格 中 插入 背景 图 








像 。 在 第 1 列 单元 格 





hb 绘制 
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AP Div 层 . 并 在 层 中 输入 文字 。 在 文档 的 最 底部 插入 一 个 宽度 为 920 像素 的 2 行 x3 列 的 表格 . 然后 在 
单元 格 中 插入 素材 图 像 ， 该 表格 为 网 页 的 版 尾 。 在 【标题 】 文 本 框 中 输入 文本 “:: 民众 购物 网 : :“ ,并 
保存 该 页 面 即 可 。 


25.5.2 制作 商品 展示 和 信息 页 面 


本 例 制作 的 商品 展示 页 面 ， 是 专门 用 来 展示 化 妆 品 的 。 在 版 面 设计 和 色彩 上 与 主页 相同 ， 只 是 将 原 
来 的 正文 部 分 更 改 为 化 妆 品 展示 区 域 . 主要 练习 引入 ASP 页 面 、 创 建 ASP 页 面 、 插 入 表格 、 使 用 选择 语 
句 、 使 用 循环 语句 、 查 看 数据 库 和 输出 数据 信息 .如 图 25-2 所 示 。 
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图 25-2 制作 商品 展示 和 信息 页 面 


STEP|01 将 网 站 的 主页 另存 为 class.asp 页 面 ， 然 后 将 原来 的 正文 内 容 删除 ， 使 留 出 空白 区 域 。 将 光标 置 
于 空白 区 域 . 然后 切换 到 【代码 】 视 图 模式 中 . 在 <td></td> 标 签 之 间 引 用 Cclass.asp 页 面 。 新 建 Cclass.asp 
页 面 ， 在 文档 中 根据 商品 展示 的 布局 插入 表格 和 谋 套 表格 。 
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STEP|02 在 【代码 ] 视 
在 ,代码 如 下 所 示 。 


四 




















模式 中 . 使 用 select 语句 查询 数据 库 中 的 商品 并 使 用 让 语句 判断 商品 是 否 存 








<S$ 

set rs=server.createobject ("adodb.recordset") 

rs.open "select * from products order by adddate desc",conn,l,l1 
if rs.recordcount=0 then 

< 

ES 

.商品 展示 代码 

务 > 


STEP|03 计算 每 页 显示 的 商品 数 、 商 品 的 总 记录 数 、 页 数 以 及 参数 的 安全 性 设置 ,代码 如 下 所 示 。 


< 多 
"每 页 商品 数 
rs.PageSize =12 
“商品 总 数 
iCount=rs.RecordCount 
' 每 页 商品 数 
iPageSize=rs.PageSize 
"总 页 数 
maxpage=rs.PageCount 
page=request ("page") 
if Not IsNumeric (page) or page="" then 
' 如 果 page 参数 不 是 数字 或 为 空 
page=1'page 参数 为 1 
else 
page=cint (page) 
end LE 
if page<1 then 
page=1 
elseif page>maxpage then 
page=maxpage 
DG 二 
rs.AbsolutePage=Page 
if page=maxpage then 
Xx=iCount- (maxpage-1)*iPageSize 
else 
x=iPageSize 
end if 


务 > 





STEP|04 使 用 for…next 循环 语句 ， 将 商品 以 每 行 4 个 的 格式 展示 在 页 面 上 ， 代 码 如 下 所 示 。 


<% 
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ii=0 
For i=1 To X 
--- "表格 内 容 
rs.movenext 
ii=ii+1 
if ii mod 4 =0 then 
务 > 
</tr> 
站 
<%end if%> 
<% next%> 


STEP|05 在 表格 的 各 个 单元 格 中 添加 相应 的 字段 名 ， 以 显示 商品 的 图 像 、 价 格 等 信息 。 
STEP|06 在 表格 的 下 面 创建 记录 集 导航 条 ， 通 过 导航 条 可 以 以 翻 页 的 形式 查看 所 有 记录 。 








< 名 
call PageControl (iCount,maxpage,page, "border=0 align=center","<p align=center>") 
! 以 下 为 Sub 过 程 
Sub PageControl (iCount,pagecount,page,table style, font style) 
"生成 上 一 页 下 一 页 链接 
Dim query, a, x, temp 
action = "http://" & Request.ServerVariables ("HTTP HOST") & Request. 
ServerVariables ("SCRIPT_NAME") ' 链 接地 址 


Response.Write("<table width=100% border=0 cellpadding=0 cellspacing=0 >" 
& VbCcrLE ) 


Response.Write("<form method=get onsubmit =""document.location =" & action 
& "2" & temp & "Page="+ this.page.value;return false;""><TR >" & vbCrLf ) ' 表 单 
Response.Write("<TD align=center height=40>" & vbCrLf ) 
Response.Write(font style & vbCrLf ) 
if page<=1 then 

Response.Write ("首页 " & vbcrLf) 

Response.Write ("上 一 页 " & vbCrLf) 


Else 

" 跳 转 到 第 工 页 
Response.Write("<A HREF=" & action & "2?" & temp & "Page=1> 首 页 </A> " & 
vbCrLf) 
Response.Write("<A HREF=" & action & "?" & temp & "Page=" & (Page-1) & "> 
上 一 页 </A> "” & vbCrLf) ' 跳 转 到 上 一 页 

end Lt 


if page>=pagecount then 
Response.Write ("下 一 页 " & vbCrLf) 
Response.Write (" 尾 页 " & vbcrLf) 
Else 
Response.Write ("<A HREF=" & action & "?" & temp & "Page=" & (Page+l) & "> 
下 一 页 </A> " & vbCrLf) 
' 跳 转 到 最 后 一 页 


Response.Write ("<A HREF=" & action & "?" & temp & "Page=" & pagecount & "> 








: 网 页 设计 与 网 站 建设 自学 经 典 :::: 


网 页 设计 与 网 站 建设 自学 经 典 





尾 页 </A> " & vbcrLf) 
end if 
"显示 当前 页 数 
Response.Write ("页 数 : " & page & "/" & pageCount & "页 " & vbCrLf) 
"显示 商品 总 数 
Response.Write(” 共有 "” & iCount & "种 商品 " & vbCrLf) 
Response.Write(” 转 到 " & "<INPUT CLASS=wenbenkuang TYEP=TEXT NAME=page SIZE=2 
Maxlength=5 VALUE=" & page & ">" & "页 " & vbCrLf & "<INPUT type=submit value= 
GO>") 
Response.Write("</TD>" & vbcrLf ) 
Response.Write("</TR></form>" & vbCrLf ) 
Response.Write("</table>" & vbCrLf ) 
End Sub 
务 > 


STEP|07 保存 页 面 后 ， 按 快捷 键 F12 预览 效果 。 
详细 信息 页 面 可 以 根据 地 址 中 的 商品 id 参数 ， 通 过 查询 数据 库 的 方式 ， 将 该 商品 的 相关 信息 显示 在 
页 面 中 ， 包 括 商品 名 称 、 品 牌 、 规 格 、 数 量 、 折扣 等 信息 ， 如 图 25-3 所 示 。 
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图 25-3 详细 信息 页 面 
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STEP108 将 网 站 的 主页 另存 为 products.asp 页 面 ， 然 后 将 原来 的 正文 内 容 删除 ， 使 留 出 空白 区 域 。 将 光 
标 置 于 空白 区 域 ， 然 后 切换 到 【代码 】 视 图 模式 中 ， 在 <td></td> 标 签 之 间 引 用 Cproducts.asp 页 面 。 新 建 
Cproducts.asp 页 面 ， 根 据 商 品 详细 信息 的 展示 布局 插入 表格 和 吝 套 表格 。 在 表格 的 各 个 单元 格 中 插入 显 
示 对 应 字段 的 代码 。 
STEP|09 切换 到 【代码 】 视 图 模式 中 .使 用 select 语句 根据 地 址 中 的 id 参数 查询 数据 库 中 的 相应 数据 . 
代码 如 下 所 示 。 






































<%set rs=server.createobject ("adodb.recordset") 
rs.open “select * from products where bookid=”&grequest (“id’”),conn,1l,3 
if rs.recordcount=0 then 


' 如 果 查 询 的 记录 为 0 

> 

<font color="#FF0000"><strong> 商 品 已 不 存在 </strong></font> 
<% 

elLse 


rs("liulancount")=rs ("liulancount")+1 
rs.update 

end if 

%> 


STEP|10 选择 “购买 ”图 像 ， 设 置 链接 地 址 为 “buy.asp?id=<%=rs("bookid")%>&amp:action=add” ， 然 后 
保存 页 面 ， 按 F12 键 预览 效果 。 





